.dine-carousel-c,
.more-experiences-carousel-c,
.nearby-carousel-c { position: relative; }

.page-template-page-experiences {
  & .slider-experience .item {
    position: relative;

    & > div {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      padding: 40px 40px 120px;
    }
    & img {
      border-radius: 24px;
      width: 100%;
    }
    & h3 {
      margin: 0;
      font-size: 14px;
      line-height: 22px;
      color: #fefefe;
      font-weight: 300;
      letter-spacing: 1px;
    }
    & h2 {
      margin: 10px 0 0 0;
      font-size: 76px;
      line-height: 84px;
      color: #fefefe;
    }
    & p {
      max-width: 800px;
      margin: 24px auto 0;
      color: #fefefe;
      font-weight: 300;
    }
  }

  & .dine {
    padding: 105px 20px 130px;

    &:before {
      background: rgba(0, 0, 0, 0);
    }

    & .ins .top {
      & h3 {
        margin: 0;
        font-size: 14px;
        line-height: 22px;
        color: #fefefe;
        font-weight: 300;
        letter-spacing: 1px;
      }
      & h2 {
        margin: 10px 0 0 0;
        font-size: 48px;
        line-height: 56px;
        color: #fefefe;
      }
      & p {
        max-width: 800px;
        margin: 24px auto 0;
        color: #fefefe;
        font-weight: 300;
      }
    }

    & .dine-carousel {
      /* max-width: 1500px;
            margin: 0 auto; */
      padding-left: calc((100% - 1260px) / 2);
      margin-top: 24px;
      /* margin-left: 20px; */
      /* margin-left: 40px; */

      & .slick-list {
        overflow: inherit;
      }
      & .item {
        width: 861px;
        background: #fefefe;
        border-radius: 24px;
        margin-right: 40px;
        padding: 24px;
        display: flex;
        gap: 32px;

        & .item-left-col {
          flex: 0 0 400px;

          & img {
            aspect-ratio: 400 / 476;
            object-fit: cover;
            border-radius: 17px;
          }
        }
        & .item-right-col {
          display: flex;
          flex-direction: column;
          flex: 1;

          & .item-header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            & h3 {
              font-family: "Acta Headline";
              margin-top: 0;
              margin-bottom: 0;
            }
            & h3,
            & p {
              color: #1a1a1a;
            }
          }
          & .item-content {
            margin-top: 12px;

            & h4 {
              margin-top: 24px;
            }
            & h4,
            & p {
              font-size: 16px;
              line-height: 24px;
              font-weight: 300;
              color: #666666;
            }
            & .m-box .lst {
              margin-top: 0;
              padding-bottom: 0;
              & > div {
                align-items: flex-start;

                & p {
                  margin-top: 0;
                  line-height: 20px;
                }
              }
            }
          }
          & .item-footer {
            margin: auto 0 0;
            display: flex;
            gap: 8px;

            & .dark-border {
              border-color: #1a1a1a !important;
            }
          }
        }
      }

      & .slick-dots {
        justify-content: flex-start;
        position: inherit;
        bottom: -24px;
      }
    }
  }

  & .dine-tabs {
    margin-top: 0px;
    padding: 104px 0 104px;

    &:before {
      content: none;
    }
    & .top {
      & ul.nav.nav-tabs {
        margin-top: 0;
        & li {
          & a {
            color: #1a1a1a;
          }
          &.active a {
            border-bottom-color: #1a1a1a !important;
          }
        }
      }
    }
    & .tab-content {
      padding: 0 20px;
      margin-top: 40px !important;

      & .experience-dine-tab-container {
        max-width: 1260px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 140px;

        & .item-left-col,
        & .item-right-col {
          flex: 1;
        }
        & .item-left-col {
          & img {
            aspect-ratio: 614 / 802;
            object-fit: cover;
            border-radius: 24px;
          }
        }
        & .item-right-col {
          & h3 {
            margin: 0;
            font-size: 14px;
            line-height: 22px;
            color: #666;
            font-weight: 300;
            letter-spacing: 1px;
            text-transform: uppercase;
          }
          & h2 {
            margin: 10px 0 0 0;
            font-size: 48px;
            line-height: 56px;
            color: #1a1a1a;
          }
          & p {
            max-width: 800px;
            margin: 24px auto;
            color: #666;
            font-weight: 300;
          }
        }
      }
    }
  }

  & .more-experiences {
    margin-top: 0;
    padding: 0 20px 130px;

    &:before {
      content: none;
    }

    & .ins .top {
      & h3 {
        margin: 0;
        font-size: 14px;
        line-height: 22px;
        font-weight: 300;
        letter-spacing: 1px;
      }
      & h2 {
        margin: 10px 0 0 0;
        font-size: 48px;
        line-height: 56px;
        color: #1a1a1a;
      }
      & p {
        max-width: 800px;
        margin: 24px auto 0;
        font-weight: 300;
      }
    }
    
    & .more-experiences-carousel {
      padding-left: calc((100% - 1260px) / 2);
      margin-top: 24px;

      & .slick-list {
        overflow: inherit;
      }
      & .item {
        width: 506px;
        background: #fefefe;
        border-radius: 24px;
        margin-right: 40px;
        padding: 24px;
        display: grid;
        grid-auto-rows: 1fr;

        & .item-left-col {
          & img {
            width: 100%;
            height: 305px;
            object-fit: cover;
            border-radius: 8px;
          }
        }
        & .item-right-col {
          display: flex;
          flex-direction: column;

          & .item-header {
            & h3 {
              color: #1a1a1a;
              font-family: "Acta Headline";
            }
          }

          & .item-content {
            & p {
              font-size: 16px;
              line-height: 24px;
            }
          }

          & .item-footer {
            margin-top: auto;
          }
        }
      }

      & .slick-dots {
        justify-content: flex-start;
        position: inherit;
        bottom: -24px;
      }
    }
  }

  & .nearby-options {
    overflow: hidden;  
    padding: 80px 0 104px;
    padding-left: calc((100% - 1260px) / 2);
    margin-top: 0;

    & > div {
      display: grid;
      grid-template-columns: 430px minmax(0, 1fr);
      grid-gap: 0 40px;
      align-items: start;
    }
    & .top {
      display: flex;
      flex-direction: column;
      height: 100%;

      & h3 {
        margin: 0;
        font-size: 14px;
        line-height: 22px;
        font-weight: 300;
        letter-spacing: 1px;
      }
      & h2 {
        margin: 10px 0 0 0;
        font-size: 48px;
        line-height: 56px;
        color: #1a1a1a;
      }
      & p {
        max-width: 800px;
        margin: 24px auto 0;
        font-weight: 300;
      }

      & .slick-slider-dots {
        position: relative;
        margin-top: auto;

        & .slick-dots {
          justify-content: flex-start;
          position: inherit;
          bottom: 0;

          & li:not(.slick-active) button {
            border: 1px solid #f2f2f2;
            background: #f2f2f2;
          }
        }
      }
    }

    & .nearby-carousel {
      & .item {
        width: 612px;
        background: #f2f2f2;
        border-radius: 24px;
        margin-right: 32px;
        padding: 40px;
        display: grid;
        /* grid-auto-rows: 1fr; */

        & .item-header {
          & h3 {
            margin: 0;
            font-size: 14px;
            line-height: 22px;
            font-weight: 300;
            letter-spacing: 1px;
            text-transform: uppercase;
          }
          & h2 {
            font-family: "Acta Headline";
            line-height: 40px;
            color: #1a1a1a;
            font-size: 32px;
            margin-top: 0;
            margin-bottom: 0;
          }
        }

        & .item-content {
          display: flex;
          gap: 40px;
          margin-top: 40px;

          & .item-left-col {
            & p {
              font-size: 16px;
              line-height: 24px;
            }
          }
          & .item-right-col {
            flex: 0 0 183px;
            width: 183px;
            max-width: 183px;

            & .lst {
              margin-top: 0;
              padding-bottom: 12px;

              & > div {
                align-items: flex-start;

                & p {
                  font-size: 16px;
                  line-height: 24px;
                  margin-top: 0;
                }
              }
            }
          }
        }
      }
    }
  }

  & .faq {
    & .item {
      max-width: 830px;
      margin: 0 auto;

      & .lst > div {
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 1px solid #b8b8b8;
        position: relative;
        padding-bottom: 30px;
        padding-right: 30px;

        &:not(:first-child) {
          margin-top: 12px;
        }

        & .faq-question {
          cursor: pointer;

          & p {
            color: #1a1a1a;
            margin-top: 17px;
          }
        }
        & .rich-text {
          & * {
            font-size: 16px;
            line-height: 24px;
            color: #1a1a1a;
          }
          & ul {
            display: grid;
            grid-template-columns: repeat(2, auto);
            column-gap: 50px;
            justify-content: start;
            width: 100%;

            & li {
              font-weight: 300 !important;

              &:before {
                content: none;
              }
              & svg {
                margin-right: 6px;
                width: 6px !important;
                height: 12px !important;
              }
            }
          }
        }
        & .accordion-arrow {
          position: absolute;
          top: 37px;
          right: 0;
          transform: translateY(-50%);
          cursor: pointer;
          margin-left: 0;
        }
      }
    }
  }
}

@media (width < 1025px) {
  .page-template-page-experiences {
    & .dine {
      & .dine-carousel {
        margin-left: 24px;

        & .item {
          margin-right: 24px;
        }
      }
    }

    & .nearby-options {
      & .nearby-carousel {
        & .item {
          & .item-content {
            flex-direction: column;
          }
        }
      }
    }
  }
}
@media (width < 768px) {
  .page-template-page-experiences {
    & .slider-experience {
      & .item {
        & img {
          height: 270px;
          object-fit: cover;
        }
        & > div {
          position: relative;
          inset: 0;
          text-align: center;
          padding: 24px 0 100px;

          & h3 {
            color: #666666;
          }
          & h2 {
            font-size: 32px;
            line-height: 40px;
            color: #1a1a1a;
          }
          & p {
            font-size: 20px;
            line-height: 28px;
            color: #666666;
          }
        }
      }
      & .slick-dots {
        & li {
          & button {
          }
          &.slick-active button {
            background: #2a2a2a;
            border-color: #2a2a2a;
            color: #fefefe;
          }
          &:not(.slick-active) button {
            color: #2a2a2a;
            border: 1px solid #2a2a2a;
            background: transparent;
          }
        }
      }
    }
    & .dine {
      padding: 40px 24px 40px;

      & .ins .top {
        & h2 {
          font-size: 32px;
          line-height: 40px;
        }
      }
      & .dine-carousel {
        margin-left: 0;

        & .slick-list {
          margin: 0 -20px;
          overflow: hidden;

          & .item {
            flex-direction: column;
            gap: 24px;
            margin: 0 20px;

            & .item-left-col {
              flex: 0 0 auto;

              & img {
                aspect-ratio: initial;
                height: 220px;
                width: 100%;
              }
            }
            & .item-right-col {
              & .item-header {
                & h3 {
                  font-size: 24px;
                  line-height: 32px;
                }
                & p {
                  font-size: 20px;
                  line-height: 28px;
                }
                & img {
                  width: 100%;
                  max-width: 66px;
                }
              }
              & .item-content {
                & h4 {
                  font-size: 16px;
                  line-height: 24px;
                }
                & p {
                  font-size: 14px;
                  line-height: 22px;
                }
              }
              & .item-footer {
                margin: 24px 0 8px;
              }
            }
          }
        }

        & .slick-dots {
          justify-content: center;
          bottom: -20px;
        }
      }
    }
    & .dine-tabs {
      padding: 40px 0 80px;

      & .top {
        overflow-y: hidden;
        overflow-x: scroll;

        & ul.nav.nav-tabs {
          justify-content: flex-start;

          & li {
            white-space: nowrap;
          }
        }
      }
      & .tab-content {
        & .experience-dine-tab-container {
          gap: 40px;
          flex-direction: column-reverse;

          & .item-left-col {
            width: 100%;

            & img {
              aspect-ratio: initial;
              height: 300px;
              width: 100%;
            }
          }
          & .item-right-col {
            text-align: center;

            & h2 {
              font-size: 32px;
              line-height: 40px;
            }
            & a {
              margin: 0 auto;
            }
          }
        }
      }
    }
    & .more-experiences {
      padding: 0 24px 70px;

      & .ins .top {
        & h2 {
          font-size: 32px;
          line-height: 40px;
        }
      }

      & .more-experiences-carousel {
        & .slick-list {
          margin: 0 -20px;
          overflow: hidden;

          & .item {
            grid-auto-rows: auto 1fr;
            margin: 0 20px;

            & .item-left-col {
              & img {
                aspect-ratio: initial;
                height: 220px;
                width: 100%;
              }
            }
            & .item-right-col {
              & .item-header {
                & h3 {
                  font-size: 24px;
                  line-height: 32px;
                }
              }
              & .item-content {
                & p {
                  font-size: 14px;
                  line-height: 22px;
                }
              }
              & .item-footer {
                margin: 12.5px auto 8px;
              }
            }
          }
        }

        & .slick-dots {
          justify-content: center;
          bottom: -30px;
        }
      }
    }
    & .nearby-options {
      padding: 40px 24px 120px;

      & .ins {
        position: relative;
        grid-template-columns: 100%;

        & .top {
          display: flex;
          flex-direction: column;
          height: 100%;
          text-align: center;
          align-items: center;

          & h2 {
            font-size: 32px;
            line-height: 40px;
          }
        }
        & .nearby-carousel {
          margin-top: 40px;

          & .slick-list {
            margin: 0 -20px;
            overflow: hidden;

            & .item {
              padding: 24px;
              margin: 0 20px;

              & .item-content {
                flex-direction: column;
                gap: 28px;
                margin-top: 35px;

                & .item-right-col {
                  & .lst {
                    padding-bottom: 35px;
                  }
                }
              }
            }
          }
        }
        & .slick-slider-dots-mobile {
          & .slick-dots {
            bottom: -80px;

            & li {
              & button {
              }

              &:not(.slick-active) button {
                color: #2a2a2a;
                border: 1px solid #f2f2f2;
                background: #f2f2f2;
              }
            }
          }
        }
      }
    }
    & .faq {
      & h2 {
        font-size: 32px;
        line-height: 40px;
      }
      & .item {
        & .lst > div {
          & .accordion-arrow {
            top: 48%;
            transform: translateY(-48%);
          }
        }
      }
    }
  }
}