section.section:not(.hero-banner, .booking-form-section, .featured-in) > .section-content {
  padding-block: 5em;
}

.title-wrapper .title-of-section {
  margin-bottom: 0;
}

.title-wrapper {
  margin-bottom: 1em;
}

.title-wrapper a, .view-tour-btn > a {
  display: block;
  width: fit-content;
  margin-inline: auto;
  white-space: nowrap;
  color: #fff;
  font-weight: 700;
  font-size: 1.2em;
  text-transform: capitalize;
  background: var(--primary-medium);
  padding: 1em 5em;
  border-radius: 1em;
  transition: background 300ms, color 300ms;
}

.title-wrapper a:hover, .view-tour-btn > a:hover {
  color: #000;
  background: #fff;
}

/* ============================
   |        HERO BANNER       |
   ============================  */
.section.hero-banner {
  max-height: 48rem;
  overflow: hidden;
}

.hero-banner .text-inner {
  display: grid;
  gap: 2em;
}

.hero-banner .title-of-section {
  font-size: 5.25em;
}

.hero-banner h3 {
  font-size: 1.625em;
  font-weight: 700;
}

.hero-banner .tour-buttons {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}

.hero-banner .tour-buttons a {
  flex: 1 0 auto;
  padding: 1em;
  border-radius: 1em;
  font-size: 1rem;
  background-color: var(--primary-medium);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 300ms;
}

.hero-banner .tour-buttons a:hover {
  background-color: var(--gray-darkest);
}

/* ============================
   |    WHAT CUSTOMERS SAY    |
   ============================  */
.what-customers-say .col-inner {
  background: #fff;
  padding: 3em 2em;
  box-shadow: 0 0 1em .25em rgba(0, 0, 0, .25);
  border-radius: 2em;
}

.what-customers-say .title-of-section {
  text-align: center;
  margin-bottom: 1em;
}

/* ============================
   |      POPULAR TOURS       |
   ============================  */
section:is(.popular-tours, .be-inspired) .title-wrapper {
  display: flex;
  align-items: center;
}

.popular-tours .title-wrapper .title-of-section {
  text-align: center;
  margin-bottom: 2rem;
}

.popular-tours {
  container-type: inline-size;
}

section:is(.popular-tours):has( + .popular-tours ) .section-content {
  padding-block: 5rem 0;
}

section:is(.popular-tours, .be-inspired) .title-of-section {
  font-size: 3em;
}

.featured-trips {
  margin-bottom: 2em;
}

.featured-trips .swiper-slide {
  --_slides-per-view: 1;
  --_space-between: 0rem;
  height: auto;
  width: calc((100% - (var(--_slides-per-view) - 1) * var(--_space-between)) / var(--_slides-per-view));
  margin-right: var(--_space-between);
}

.featured-trips--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax( 0, 1fr ));
  gap: .625rem;
}

/* @container (width <=850px) {
  .featured-trips :is(.swiper-button-prev, .swiper-button-next) {
    display: none;
  }

  .featured-trips .swiper-wrapper {
    flex-direction: column;
    row-gap: 1.25rem;
  }

  .featured-trips--carousel .product-card {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
  }

  .featured-trips--carousel .product-card__thumbnail {
    aspect-ratio: unset;
    height: 100%;
  }
} */

@container ( width > 550px ) {
  .featured-trips--grid {
    --_slides-per-view: 2;
    gap: 1.25rem;
  }
}

@container (width > 850px) {
  .featured-trips .swiper-slide {
    --_slides-per-view: 3;
    --_space-between: 1.25rem;
  }

  .featured-trips--grid {
    --_slides-per-view: 3;
  }
}

/* ============================
   |       FEATURED IN        |
   ============================  */
.homepage-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

.homepage-gallery > img {
  object-fit: cover;
}

.homepage-gallery > img:hover {
  box-shadow: inset 0 0 50em rgba(255, 255, 255, .5);
}

.homepage-gallery > img:not(:first-child, :nth-child(6)) {
  aspect-ratio: 1/1;
}

.homepage-gallery > img:nth-child(1) {
  grid-column: 1 / span 2;
  aspect-ratio: 2/1;
}

.homepage-gallery > img:nth-child(6) {
  grid-column: 3 / span 2;
  aspect-ratio: 2/1;
}

.homepage-gallery > a {
  cursor: pointer;
  position: absolute;
  bottom: 1em;
  right: 1em;
  padding: .625em 2em;
  background-color: rgba(0, 0, 0, .25);
  color: #fff;
  border-radius: .625em;
  transition: background-color 300ms, color 300ms;
}

.homepage-gallery > a:hover {
  background-color: rgba(255, 255, 255, 1);
}

::backdrop {
  background: rgba(0, 0, 0, .8);
}

#homepage-gallery__dialog {
  background-color: transparent;
  border: 0;
  height: 80svh;
  overflow: hidden;
}

#homepage-gallery__dialog > .dialog__close-btn {
  position: absolute;
  top: 1em;
  right: 1em;
  color: #fff;
  z-index: 2;
  display: inline-block;
  cursor: pointer;
}

#homepage-gallery__dialog > .dialog__close-btn:hover {
  color: var(--gray-dark);
}

#homepage-gallery__dialog span {
  width: fit-content;
  font-size: 4em;
}

#homepage-gallery__dialog .swiper {
  height: 100%;
}

#homepage-gallery__dialog img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

html.homepage-gallery-showing {
  overflow: hidden;
}

@container content (width < 850px) {
  .homepage-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .homepage-gallery > img:nth-child(4) {
    grid-column: 1/ span 2;
    aspect-ratio: 2/1;
  }

  .homepage-gallery > img:nth-child(6) {
    grid-column: span 1;
    aspect-ratio: 1;
  }
}
/* ============================
   |    Motorbike category    |
   ============================  */
.motorbikes-category {
  container-type: inline-size;

  .title-of-section:has( + .description-of-section ) {
    margin-bottom: .625em;
  }

  .title-of-section:not(:has( + .description-of-section )) {
    margin-bottom: 3.125rem;
  }

  .description-of-section {
    margin-bottom: 3.125rem;
  }
}

.motorbikes-carousel {
  --_slides-per-view: 1;
  --_space-between: 1.25rem;

  @container (width > 550px) {
    --_slides-per-view: 2;
  }

  @container(width > 850px) {
    --_slides-per-view: 4;
  }
}

.motorbikes-carousel .swiper-slide {
  height: auto;
  width: calc( ( 100% - (var(--_slides-per-view) - 1) * var(--_space-between) ) / var(--_slides-per-view) );
  margin-right: var(--_space-between);
  display: grid;
  place-items: center;
}

.motorbike {
  position: relative;
  padding-block: var(--_motorbike-padding-block, 2.5625rem);
  padding-inline: var(--_motorbike-padding-inline, .9375rem);
}

.motorbike__overlay {
  position: absolute;
  z-index: -1;
  border-radius: .625rem;
  top: var(--_motorbike-overlay-top, 0rem);
  left: var(--_motorbike-overlay-left, 0rem);
  width: var(--_motorbike-overlay-width, 100%);
  height: var(--_motorbike-overlay-height, 100%);
  background-color: var(--_motorbike-overlay-bg-clr, var(--gray-light));
  border: .125rem solid var(--_motorbike-overlay-borer-clr, var(--_motorbike-overlay-bg-clr, var(--gray-light)));

  transition: top 250ms, left 250ms, width 250ms, height 250ms, border-color 250ms;
}

.motorbike:hover .motorbike__overlay {
  border-color: var(--_motorbike-hover-overlay-border-clr, var(--gray-darkest));

  transition: top 500ms, left 500ms, width 500ms, height 500ms, border-color 500ms;
}

.motorbike__best-choice-tag {
  position: absolute;
  top: .9375rem;
  left: 50%;
  transform: translate( -50%, 0 );
  background-color: var(--secondary-medium);
  font-size: .75rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .3125rem;
  padding: .25rem .625rem;
  white-space: nowrap;
  border-radius: 2rem;

  .material-symbols-outlined {
    font-size: 1rem;
  }
}

.motorbike__name {
  font-size: 1.25rem;
  text-align: center;
}

.motorbike__thumbnail {
  margin-bottom: 1.875rem;
}

.motorbike__features {
  margin-bottom: 1rem;
}

.check-list {
  margin-bottom: 0;
  list-style: none;

  li {
    margin-left: 0 !important;
    margin-bottom: .625rem;
    font-size: .875rem;
    display: flex;
    align-items: center;
    gap: .25rem;

    &:before {
      content: '\e86c';
      font-family: 'Material Symbols Outlined';
      font-size: 1.25rem;
      line-height: 1;
    }
  }
}

.motorbike__price-wrapper {
  margin-bottom: .9375rem;
}

.motorbike__price {
  font-size: 1.5rem;
  font-weight: 900;
}

.motorbike__currency {
  font-size: .875rem
}

.motorbike__phone-call {
  padding: .375rem .75rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background-color: var(--_cta-phone-bg-clr, var(--tertiary-medium));
  text-transform: uppercase;
  color: var(--_cta-phone-text-clr, #000);
  font-size: .875rem;
  font-weight: 600;
  border-radius: .25rem;
  transition: background-color 250ms, color 250ms;

  &:hover {
    background-color: var(--_cta-phone-hover-bg-clr, var(--tertiary-dark));
  }
}

.motorbike.best-choice {
  --_motorbike-overlay-bg-clr: var(--tertiary-lighter);
  --_motorbike-hover-overlay-border-clr: transparent;
  --_cta-phone-bg-clr: var(--gray-lightest);
  --_cta-phone-hover-bg-clr: var(--gray-dark);

  &:hover .motorbike__overlay {
    animation: border-color-blink 800ms ease;
  }
}

.motorbike.best-choice {
  @container ( width > 850px ) {
    --_motorbike-padding-block: 3.125rem 2.5625rem;
    --_motorbike-overlay-top: -1.875rem;
    --_motorbike-overlay-height: calc( 100% + var(--_motorbike-overlay-top) * -2 );
  }
}

@-webkit-keyframes border-color-blink {
  0%, 50% { border-color: var(--gray-darkest) }
  25%, 75%, 100% { border-color: transparent }
}
@keyframes border-color-blink {
  0%, 50% { border-color: var(--gray-darkest) }
  25%, 75%, 100% { border-color: transparent }
}
/* ============================
   |        BE INSPIRED       |
   ============================  */
.be-inspired .sub-title {
  margin-bottom: 2em;
  color: var(--gray-lightest);
}

.be-inspired .col-inner {
  border-radius: 1em;
  overflow: hidden;
}

/* CONTAINER */
@container content (width < 1200px) {
  .section:not(.hero-banner, .featured-in) .section-content {
    padding-inline: .625em;
  }
}

@container content (width < 850px) {
  .title-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 1em;
  }

  .title-of-section {
    text-align: center;
  }

  .news-wrapper {
    grid-template-columns: repeat(2, var(--news-item-width));
  }
}

@container content (width < 550px) {
  .hero-banner .title-of-section {
    font-size: 4em;
  }

  .hero-banner .tour-buttons {
    gap: .625em;
    flex-flow: column nowrap;
    align-items: center;
  }

  .hero-banner .tour-buttons a {
    width: 60%;
  }

  .news-wrapper {
    gap: 1em;
  }
}


/* block-gallery */
.block-galery svg {
  position: relative;
  top: 5px;
}

.block-galery {
  width: 100%;
  position: relative;
}

.block-galery .list-gal {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  z-index: 5;
}

.block-galery .list-gal .img {
  width: 25%;
  height: 450px;
}

.block-galery .list-gal .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.block-galery .list-gal .img:hover {
  opacity: 0.8;
}

.block-galery .list-gal .img:first-child,
.block-galery .list-gal .img:nth-child(6) {
  width: 50%;
}

.block-galery .btn-viewall {
  position: absolute;
  bottom: 30px;
  right: 30px;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  color: #FFFFFF;
  margin-bottom: 0px;
  border: none;
}

.block-galery .btn-viewall:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #FFFFFF;
}

@media (max-width: 1600px) {
  .block-galery .list-gal .img {
    height: 360px;
  }
}

@media (max-width: 1300px) {
  .block-galery .list-gal .img {
    height: 300px;
  }
}

@media (max-width: 992px) {
  .block-galery .list-gal .img {
    height: 250px;
  }
}

@media (max-width: 768px) {
  .block-galery .list-gal .img {
    height: 200px;
  }
}

@media (max-width: 767px) {
  .block-galery .list-gal .img {
    height: 150px;
  }

  .block-galery .btn-viewall {
    bottom: 15px;
    right: 10px;
    padding: 8px 20px;
    font-size: 14px;
    line-height: 20px;
  }
}

@media (max-width: 570px) {
  .block-galery .list-gal .img {
    height: 175px;
    width: 50% !important;
  }

  .block-galery .list-gal .img:nth-child(n + 6) {
    display: none;
  }

  .block-galery .list-gal .img:nth-child(3) {
    width: 100% !important;
  }

  .block-galery .list-gal .img:nth-child(4) {
    width: 50% !important;
  }

  .block-galery .list-gal .img:nth-child(5) {
    width: 50% !important;
  }
}


/* end block-gallery */