.experienceTabs {
    background: var(--color-iceland-200, #F9F6F0);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;

    @media screen and (min-width:960px) {
        display: flex;
        padding-bottom: 80px;
        flex-direction: column;
        align-items: center;
    }
}

.experienceTabs__container {
    display: flex;
    padding: var(--section-padding-lg, 64px) var(--page-padding, 20px) 32px var(--page-padding, 20px);
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    overflow-x: hidden;

    @media screen and (min-width:960px) {
        display: flex;
        padding: 80px var(--page-padding, 64px) 64px var(--page-padding, 64px);
        flex-direction: column;
        align-items: center;
        gap: 64px;
    }
}

.experienceTabs__heading {
    display: flex;
    max-width: 768px;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    @media screen and (min-width:960px) {
        display: flex;
        max-width: 768px;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
}

.experienceTabs__heading p {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font: var(--font-overline-lg);
    color: var(--color-contrast-200);
    margin-bottom: 0px !important;
}

.experienceTabs__heading h2 {
    text-align: center;
    font: var(--font-title-lg);
    color: var(--color-iceland-1000);
    margin-bottom: 0px !important;
}

.experienceTabs__tab-container {
    display: flex;
    padding: 16px 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.experienceTabs__scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.experienceTabs__scroll::-webkit-scrollbar {
    display: none;
}

.experienceTabs .experienceTabs__tabs {
    display: flex;
    flex-direction: row;
    gap: var(--sizing-3xl, 40px);
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

.experienceTabs .experienceTabs__tabs li {
    padding-top: var(--sizing-2xs, 4px);
    gap: var(--sizing-xs, 8px);
    list-style: none;
    text-align: center;
    padding-bottom: 8px;
    cursor: pointer;
    color: var(--color-iceland-800, #524F48);
}

.experienceTabs__tabs button {
    background: none;
    border: none;
    cursor: pointer;
}

.experienceTabs .experienceTabs__tabs .experienceTabs__tab-active {
    color: var(--color-iceland-900, #34322E);
    font-weight: 600;
    border-bottom: 2px solid var(--color-accent-coral, #FF5A58);
}

.experienceTabs__tab-hidden { 
    display: none !important;
}

@media (min-width: 768px) { 
  .experienceTabs__scroll {
    width: 100%;
    overflow: visible;
  }

  .experienceTabs .experienceTabs__tabs {
    justify-content: center;
    white-space: normal; 
  }

  .experienceTabs .experienceTabs__tabs li {
    flex: 0 0 auto;
  }
}

.experienceTabs__cards-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.experienceTabs__cards {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    position: relative;

    @media screen and (min-width:960px) {
        display: flex;
        width: 100%;
        max-width: 1440px;
        flex-direction: row;
        align-items: center;
    }
}

.experienceTabs__cards::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: var(--color-iceland-500, #D1C9B8);
    
    @media screen and (min-width:960px) {
        height: 0px;
    }
}


.experienceTabs__card-is-right {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;

    @media screen and (min-width:960px) {
        flex-direction: row;
    }
}

.experienceTabs__card-text {
    display: flex;
    max-width: 1280px;
    padding: 24px 20px 48px 20px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;

    @media screen and (min-width:960px) {
        display: flex;
        padding: 80px 40px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 180px;
        flex: 1 0 0;
        align-self: stretch;
        max-width: 50%;
    }

    @media screen and (min-width:1280px) {
        padding: 112px 120px;
    }
}

.experienceTabs__card-text p {
    margin-bottom: 0px !important;    
}

.experienceTabs__border {
    @media screen and (min-width:960px) {
        border-right: 1px solid var(--color-iceland-500, #D1C9B8);
    }
}

.experienceTabs__card-text-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-self: stretch;
    text-align: center;
}

.experienceTabs__card-image {
    display: flex;
    padding: 64px 20px 48px 20px;
    align-items: center;
    gap: 10px;
    align-self: stretch;

    @media screen and (min-width:960px) {
        display: flex;
        padding: 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex: 1 0 0;
        align-self: stretch;
        overflow: hidden;
        max-width: 50%;
    }

    @media screen and (min-width:1280px) {
        padding: 40px 80px;
    }
}

.experienceTabs__card-media-container {
    height: 304.976px;
    flex: 1 0 0;
    aspect-ratio: 67/61;
    position: relative;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;

    @media screen and (min-width:960px) {
        width: 100%;
        max-width: 560px;
        height: auto;
        aspect-ratio: 67/61;
        margin: 0;
    }
}

.experienceTabs__card-media-right:first-child {
    width: 60%;
    height: 100%;
    flex: 1 0 0;
    aspect-ratio: 67/61;
    border-radius: 0 0 120px 0;
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
    border-radius: 0 0 0 120px;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    max-height: 480px;

    @media screen and (min-width:960px) {
            aspect-ratio: 3/4;
            position: absolute;
            top: 0;
            right: 0;
            left: unset;
            border-radius: 0 0 180px 0;
            width: 64%;
            max-width: 360px;
    }
}

.experienceTabs__card-media-right:nth-child(2) {
    width: 48%;
    aspect-ratio: 4/3;
    position: absolute;
    left: 50%;
    top: 20%;
    object-fit: cover;

    @media screen and (min-width:960px) {
        aspect-ratio: 1/1;
        position: absolute;
        left: 0;
        bottom: 0;
        top: unset;
        width: 71%;
        max-width: 400px;
    }
}

.experienceTabs__card-media-left:first-child {
    height: 100%;
    flex: 1 0 0;
    aspect-ratio: 6/5;
    border-radius: 0 0 120px 0;
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
    border-radius: 0 0 0 120px;
    position: absolute;
    top: -64px;
    left: 0;
    object-fit: cover;

    @media screen and (min-width:960px) {
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 0 0 0 180px;
            width: 85.71%;
            max-width: 480px;
    }
}

.experienceTabs__card-media-left:nth-child(2) {
    height: 65%;
    aspect-ratio: 3 / 4;
    position: absolute;
    left: 50%;
    bottom: -20px;
    object-fit: cover;

    @media screen and (min-width:960px) {
        position: absolute;
        left: 55%;
        top: 80px;
        height: 70%;
    }
}

.experienceTabs__card-header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.experienceTabs__card-heading {
    text-align: center;
    font: var(--font-title-md);
    color: var(--color-iceland-1000);
    margin-bottom: 0px !important;
}

.experienceTabs__card-subHeading {
    text-align: center;
    font: var(--font-body-xs);
    color: var(--color-iceland-900);
    margin-bottom: 0px !important;
    font-feature-settings: 'dlig' on;
}

.experienceTabs__card p {
    text-align: center;
    font: var(--font-body-sm);
    color: var(--color-iceland-900);
    margin-bottom: 0px !important;
    font-feature-settings: 'dlig' on;
}