/* header style */
#header-image {
   height: 350px;
}

/* content headings and subheadings */
.features-heading {
   font-weight: bold;
}
.features-subheading {
   font-size: 25px;
   text-align: center;
   margin-top: 0px;
   margin-bottom: 10px;
}

/* feature group content styles */
.features-div {
   margin-top: 85px;
   padding-left: 12%;
   padding-right: 12%;
}
.features-content {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   height: 360px;
}

/* feature lists and description styles */
.features-list {
   padding-left: 30px;
   list-style-type: none;
   font-size: 17px;
   width: 45%;
   top: 50%;
   position: relative;
   transform: translateY(-50%);
   height: fit-content;
}
.features-description {
   font-size: 15px;
   width: 45%;
   min-height: 0px;
   height: fit-content;
}
.features-description-paragraph {
   text-indent: 25px;
   margin-bottom: 5px;
}
.features-description-paragraph a {
   color: LimeGreen;
}
.features-list li {
   border-bottom: gray 1px solid;
}
.features-list li:last-child {
   border-bottom: none;
}
.features-list li span {
   margin-left: 15px;
   line-height: 35px;
}

/* feature images and maps styles */
.features-img-div {
   overflow: hidden;
   width: 60%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 25px;
   margin-bottom: 25px;
   display: flex;
   justify-content: center;
}
.features-img {
   width: 100%;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
}
.features-map-div {
   overflow: hidden;
   height: 360px;
   width: 45%;
   min-height: 0px;
}
.features-map {
   height: 100%;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
}

/* beaches information styles */
.features-info-grid {
   display: grid;
   grid-template-columns: 1fr 2fr;
   align-items: center;
   grid-column-gap: 15px;
}
.features-info-grid-item {
   margin-bottom: 10px;
   font-size: 20px;
   text-align: left;
}
.features-info-grid-item a {
   color: LimeGreen;
}

/* kamenjak map link styles */
#kamenjak-map {
   padding: 3px;
   border-radius: 5px;
}
#kamenjak-map:hover, #kamenjak-map:focus {
   text-shadow: 0px 0px 0px;
   background-color: #FF7373;
}

/* stylization on smaller screens */
@media screen and (max-width: 900px) {
   .features-content {
      flex-direction: column;
      height: auto;
   }

   .features-description, .features-map-div {
      top: 0;
      transform: none;
      width: 100%;
   }

   .features-map-div {
      margin-top: 20px;
      margin-bottom: 25px;
   }

   .features-description {
      padding-left: 0;
      margin-bottom: 25px;
   }

   .features-img-div {
      width: 100%;
   }

   .features-div:nth-child(2n) > .features-content {
      flex-direction: column-reverse;
   }
}