/* ========================= HERO ========================== */

.accomodations-hero {
  position: relative;
  display: grid;
  grid-template-columns: 640fr 448fr;
  gap: 32px;
  justify-content: center;
  margin-top: 80px;
}

@media (max-width: 600px) {
  .accomodations-hero {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
}

.accomodations-hero__text-blok {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.accomodations-hero__image-blok {
  display: flex;
  justify-content: center;
}

.accomodations-hero__image {
  max-width: 208px;
  max-height: 208px;
}

.accomodations {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 600px) {
  .accomodations {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.accomodations__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (max-width: 600px) {
  .accomodations__col {
    gap: 24px;
  }
}

.accommodation-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border: 1px solid var(--capti-color--outline-medium);
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--capti-color--white);
}

.accommodation-card__header {
  display: flex;
  gap: 16px;
}

.accommodation-card__header-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.accommodation-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.accommodation-card__body-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.accommodation-card__body-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accommodation-card__body-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.accommodation-card--human-read-directions {
  height: 160px;
}

@media (max-width: 600px) {
  .accommodation-card--human-read-directions {
    height: 180px;
  }
}

.accommodation-card__Presentation-Adjustments picture.accommodation-card__spot {
  z-index: 0;
}

.accommodation-card--keyboard-navigation .accommodation-card__body {
  height: 190px;
}

.accommodation-card--keyboard-navigation .accommodation-card__body-image picture {
  position: absolute;
  transform: translate(104px, 161px) rotate(349deg) scale(1.4);
}

.accommodation-card--keyboard-navigation picture.accommodation-card__spot {
  z-index: 0;
  height: auto;
  width: 600px;
  top: 98px;
  left: -129px;
  transform: rotate(292deg);
}

.accommodation-card__Flexible-Use-of-Devices picture.accommodation-card__spot {
  position: absolute;
  transform: translate(104px, 161px) rotate(349deg) scale(1.4);
  z-index: 0;
}

@media (max-width: 600px) {
  .accommodation-card__Flexible-Use-of-Devices picture.accommodation-card__spot {
    height: auto;
    width: 400px;
    top: 93px;
    left: 58px;
  }
}

.spot {
  position: absolute;
  z-index: -1;
}

.spot--hero-1 {
  height: auto;
  width: 400px;
  top: -96px;
  left: -151px;
  transform: rotate(358deg);
}

.spot--hero-2 {
  height: auto;
  width: 800px;
  top: -204px;
  left: 619px;
  transform: rotate(341deg);
}

.spot--1 {
  height: auto;
  width: 800px;
  top: 166px;
  left: 20px;
  transform: rotate(325deg);
}

@media (max-width: 600px) {

  .spot--hero-1 {
    height: auto;
    width: 300px;
    top: -85px;
    left: -107px;
    transform: rotate(358deg);
  }

  .spot--hero-2 {
    height: auto;
    width: 600px;
    top: 123px;
    left: -94px;
  }
}