$_POST command doesnt recognise multiple-choice image checkbox value

My Goal: when a user clicks on "submit", I want to get all the selected values (aka "attraction types") (when a picture is clicked, it should work like a checkbox). The CSS works properly, but when i reach the php file it ignores my selection and says "No Atrtype", acting like no value was chosen.

I am new to php (and coding in general) and have tried to re-order the divs, use "isset" in php and change the variable names (and a lot more), yet it was to no avail. I would appreciate some help here.

most classes have to do with css attributes , so please ignore css for this question's sake.

php:

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  // collect value of input field
  
$atrtype1    = (isset($_POST['atrtype'])    ? $_POST['atrtype']    : '');
  if (empty($atrtype)) {
    echo "No Atrtype";
  } 
  else{
      echo $atrtype1;
  }
}

html:

<form action="get_triptypes.php" method="post" class="home_search_form" id="home_search_form">
    <div id="beaches" class="choice_item">
        <div class="checkbox-wrapper">
            <input name="atrtype[0]" type="checkbox" id="beaches" value="beaches" style="display:none;"/>
            <div class="choice_image">
                <label for="beaches"> <img src="images/destination_1.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4" ondblclick="this.style.opacity = 1"> </label>
            </div>
            <div class="choice_title">
                <h1 style="font-size:50px;">Beaches</h1>
            </div>
        </div>
    </div>

    <!-- Trip -->
    <div id="history" class="choice_item">
        <div class="checkbox-wrapper">
            <input name="atrtype[1]" type="checkbox" id="history" value="history" style="display:none;"/>
            <div class="choice_image">
                <label for="history"> <img src="images/history0.jpg" alt="" width="350" height="200" onclick="this.style.opacity = 0.4; " ondblclick="this.style.opacity = 1"> </label>
                <div class="choice_title">
                    <h1 style="font-size:40px;">Historic Sites</h1>
                </div>
            </div>
        </div>
    </div>

    <!-- Trip -->
    <div id="themeparks" class="choice_item">
        <div class="checkbox-wrapper">
            <input name="atrtype[2]" type="checkbox" id="themeparks" value="themeparks" style="display:none;"/>
            <div class="choice_image">
                <label for - "themeparks"> <img src="images/amusementpark.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4" ondblclick="this.style.opacity = 1"> </label>
                <div class="choice_title">
                    <h1 style="font-size:40px;">Theme Parks</h1>
                </div>
            </div>
        </div>
    </div>

    <!-- Trip -->
    <div id="nature" class="choice_item">
        <div class="checkbox-wrapper">
            <input name="atrtype[3]" type="checkbox" id="nature" value="nature" style="display:none;"/>
            <div class="choice_image">
                <label for="nature"><img src="images/nature.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4; Add(this);" ondblclick="this.style.opacity = 1;"></label>
                <div class="choice_title">
                    <h1 style="font-size:50px;">Nature</h1>
                </div>
            </div>
        </div>
    </div>
    <!-- Trip -->
    <div id="shopping" class="choice_item">
        <div class="checkbox-wrapper">
            <input name="atrtype[4]" type="checkbox" id="shopping" value="shopping" style="display:none;"/>
            <div class="choice_image">
                <label for="shopping"><img src="images/shopping.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4" ondblclick="this.style.opacity = 1"></label>
                <div class="choice_title">
                    <h1 style="font-size:40px;">Shopping Malls</h1>
                </div>
            </div>
        </div>
    </div>

    <!-- Trip -->
    <div id="food" class="choice_item">
        <div class="checkbox-wrapper">
            <input name="atrtype[5]" type="checkbox" id="food" value="food" style="display:none;"/>
            <div class="choice_image">
                <label for="food"><img src="images/food.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4" ondblclick="this.style.opacity = 1"></label>
                <div class="choice_title">
                    <h1 style="font-size:40px;">Foodie attractions</h1>
                </div>
            </div>
        </div>
    </div>

    <!-- Trip -->
    <div id="cities" class="choice_item">
        <div class="choice_image">
            <div class="checkbox-wrapper">
                <input name="atrtype[6]" type="checkbox" id="cities" value="cities" style="display:none;"/>
                <label for="cities"> <img src="images/oldtown.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4" ondblclick="this.style.opacity = 1"></label>
                <div class="choice_title">
                    <h1 style="font-size:40px;">Old towns</h1>
                </div>
            </div>
        </div>
    </div>

    <!-- Trip -->
    <div id="culture" class="choice_item">
        <div class="choice_image">
            <div class="checkbox-wrapper">
                <input name="atrtype[7]" type="checkbox" id="culture" value="culture" style="display:none;"/>
                <label for="culture"><img src="images/dance.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4;" ondblclick="this.style.opacity = 1"></label>
                <div class="choice_title">
                    <h1 style="font-size:30px;">Cultural Activities</h1>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="row load_more_row">
        <div class="col">
            <input type="submit" class="button home_search_button"/>
        </div>
</form>