/* ==========    DESTINATIONS    ========= */
.destinations {
   margin-inline: 5%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto;
   gap: 3rem;
}

.destinations--text {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   border-radius: 0.5rem 0.5rem 0 0;
   border-top: 0.4rem solid;
}

.destinations--text>p {
   padding: 0 1rem;
   margin-top: 1rem;
}

.destination--h4 {
   border-bottom: none;
   padding: 0;
   margin-top: 1rem;
   text-transform: uppercase;
   text-align: center;
   font-weight: 700;
   color: var(--color-primary-dark-2);
   font-size: 1.1rem;
}

.destination--item {
   position: relative;
   border-radius: 0.5rem;
   border: 1px solid var(--color-primary-dark-2);
   overflow: hidden;
   background-color: rgba(255, 255, 255, 0.9);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 1.5rem;
}

.destination--item>a:first-child {
   border: none;
   padding: 0;
}

.destination--item>a:first-child:hover,
.destination--item>a:first-child:active {
   background-size: cover;
}

.destination--item>a:last-child {
   margin-bottom: 2rem;
}

.destination--item__image {
   background-size: cover;
   height: 11rem;
   clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}

.destination--item__title {
   position: absolute;
   top: 9rem;
   right: 1rem;
   width: 60%;
   color: #fff;
   text-transform: uppercase;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   text-align: right;
}

.destination--item__title-h3 {
   font-weight: 400;
   letter-spacing: 0.2rem;
   padding: 0.3rem 1rem;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
   background: linear-gradient(to right, rgba(10, 61, 90, 0.7), rgba(0, 0, 0, 0.7));
}

.destination--item__text {
   padding: 0 1rem;
   font-size: 1rem;
   line-height: 1.3;
   margin-top: 1rem;
}

/* @media(min-width: 35rem){ 768px - bigger sizе} */
@media(min-width: 35rem) {

   .divider--30,
   .destinations--text {
      grid-column: 1 / -1;
   }
}

/* ---   48 rem */
@media(min-width: 48rem) {
   .destinations {
      grid-template-columns: 1fr 1fr;
      gap: 4rem 3rem;
   }

   .destination--h4,
   .destination--end {
      grid-column: 1 / -1;
   }

   .destination--end {
      justify-self: center;
   }
}