/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: #ffffff;

    color: #17101d;

    font-family: "Isidora", sans-serif;

    font-weight: 300;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;
}



@font-face {

    font-family: "Isidora";

    src:
        url("./assets/fonts/isidora-light.woff")
        format("woff");

    font-weight: 300;

    font-style: normal;

    font-display: swap;
}




.dev1-cbox-past-recap-event-story {

    width: 100%;

    background: #ffffff;

    padding-top: 42px;

    padding-bottom: 70px;
}



.dev1-cbox-past-recap-event-story_container {

    width: calc(100% - 268px);

    max-width: 1536px;

    margin-left: auto;

    margin-right: auto;
}



.dev1-cbox-past-recap-event-story_story {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        382px;

    gap: 75px;

    align-items: start;
}




.dev1-cbox-past-recap-event-story_content {

    min-width: 0;

    padding-top: 5px;
}


/* =========================================================
   EYEBROW
========================================================= */

.dev1-cbox-past-recap-event-story_eyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 8px;
}


.dev1-cbox-past-recap-event-story_eyebrow-line {

    width: 35px;

    height: 2px;

    display: block;

    flex-shrink: 0;

    background: #e7ad32;
}


.dev1-cbox-past-recap-event-story_eyebrow-text {

    color: #632a72;

    font-family: "Isidora", sans-serif;

    font-size: 11px;

    line-height: 1;

    font-weight: 300;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   STORY TITLE
========================================================= */

.dev1-cbox-past-recap-event-story_title {

    margin: 0;

    color: #17101d;

    font-family: "Isidora", sans-serif;

    font-size: 47px;

    line-height: 1.13;

    font-weight: 300;

    letter-spacing: -2px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.dev1-cbox-past-recap-event-story_description {

    max-width: 780px;

    margin-top: 23px;
}


.dev1-cbox-past-recap-event-story_description p {

    margin: 0 0 20px;

    color: #17101d;

    font-family: "Isidora", sans-serif;

    font-size: 15px;

    line-height: 1.75;

    font-weight: 300;
}


.dev1-cbox-past-recap-event-story_description p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   QUOTE
========================================================= */

.dev1-cbox-past-recap-event-story_quote {

    max-width: 800px;

    margin:
        32px
        0
        0;

    padding:
        17px
        0
        17px
        27px;

    border-left:
        3px solid
        #e8ad35;

    color: #17101d;

    font-family: "Isidora", sans-serif;

    font-size: 16px;

    line-height: 1.7;

    font-weight: 300;
}


/* =========================================================
   HIGHLIGHT CARD
========================================================= */

.dev1-cbox-past-recap-event-story_highlight-card {

    width: 100%;

    padding:
        28px
        28px
        27px;

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            #4e1d5c 0%,
            #32133e 55%,
            #24102f 100%
        );

    box-shadow:
        0 28px 45px
        rgba(42, 22, 52, 0.24);
}


/* =========================================================
   HIGHLIGHT EYEBROW
========================================================= */

.dev1-cbox-past-recap-event-story_highlight-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 28px;

    padding:
        6px
        13px;

    border:
        1px solid
        rgba(235, 185, 81, 0.45);

    border-radius: 18px;

    color: #efc36b;

    font-size: 9px;

    line-height: 1;

    font-weight: 300;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


/* =========================================================
   HIGHLIGHT TITLE
========================================================= */

.dev1-cbox-past-recap-event-story_highlight-title {

    margin:
        18px
        0
        12px;

    color: #ffffff;

    font-size: 27px;

    line-height: 1.18;

    font-weight: 300;

    letter-spacing: -0.8px;
}


/* =========================================================
   HIGHLIGHT DESCRIPTION
========================================================= */

.dev1-cbox-past-recap-event-story_highlight-description {

    margin: 0 0 25px;

    color: #c7b4cb;

    font-size: 12px;

    line-height: 1.7;

    font-weight: 300;
}


/* =========================================================
   HIGHLIGHT LIST
========================================================= */

.dev1-cbox-past-recap-event-story_highlight-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-bottom: 21px;
}


/* =========================================================
   HIGHLIGHT ITEM
========================================================= */

.dev1-cbox-past-recap-event-story_highlight-item {

    width: 100%;

    min-height: 56px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        10px
        15px;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.055);
}


/* =========================================================
   HIGHLIGHT VALUE
========================================================= */

.dev1-cbox-past-recap-event-story_highlight-value {

    color: #efb83f;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 300;
}


/* =========================================================
   HIGHLIGHT LABEL
========================================================= */

.dev1-cbox-past-recap-event-story_highlight-label {

    color: #d0bfd4;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 300;

    text-align: right;
}


/* =========================================================
   HIGHLIGHT BUTTON
========================================================= */

.dev1-cbox-past-recap-event-story_highlight-button {

    width: 100%;

    min-height: 49px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        12px
        16px;

    border-radius:
        0
        0
        16px
        0;

    background: #7030a0;

    color: #ffffff;

    font-size: 12px;

    line-height: 1;

    font-weight: 300;

    text-decoration: none;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.dev1-cbox-past-recap-event-story_highlight-button:hover {

    background: #8139b4;

    transform: translateY(-2px);
}


/* =========================================================
   VENUE
========================================================= */

.dev1-cbox-past-recap-event-story_venue {

    width: 100%;

    margin-top: 42px;
}


/* =========================================================
   VENUE TITLE
========================================================= */

.dev1-cbox-past-recap-event-story_venue-title {

    margin-bottom: 25px;
}


.dev1-cbox-past-recap-event-story_venue-title .dev1-cbox-past-recap-event-story_eyebrow {

    margin-bottom: 7px;
}


.dev1-cbox-past-recap-event-story_venue-title h2 {

    margin: 0;

    color: #17101d;

    font-family: "Isidora", sans-serif;

    font-size: 43px;

    line-height: 1.1;

    font-weight: 300;

    letter-spacing: -1.8px;
}


/* =========================================================
   VENUE CARD
========================================================= */

.dev1-cbox-past-recap-event-story_venue-card {

    width: calc(100% - 75px);

    min-height: 225px;

    display: grid;

    grid-template-columns: 1fr 1.1fr;

    overflow: hidden;

    border-radius:
        23px
        0
        23px
        0;

    background: #ffffff;

    box-shadow:
        0 22px 38px
        rgba(44, 30, 48, 0.13);
}


/* =========================================================
   VENUE IMAGE
========================================================= */

.dev1-cbox-past-recap-event-story_venue-image {

    position: relative;

    min-height: 225px;

    overflow: hidden;

    background:
        linear-gradient(
            45deg,
            transparent 0%,
            transparent 40%,
            rgba(99, 71, 113, 0.48) 40.2%,
            rgba(99, 71, 113, 0.48) 46%,
            transparent 46.2%,
            transparent 100%
        ),
        #251035;
}


/* =========================================================
   VENUE IMAGE DIAGONAL
========================================================= */

.dev1-cbox-past-recap-event-story_venue-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            45deg,
            transparent 0%,
            transparent 48%,
            rgba(255, 255, 255, 0.035) 48%,
            rgba(255, 255, 255, 0.035) 50%,
            transparent 50%
        );
}


/* =========================================================
   VENUE PIN
========================================================= */

.dev1-cbox-past-recap-event-story_venue-pin {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 2;

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius: 50%;

    background: rgba(196, 145, 73, 0.55);

    color: #efbc50;

    font-size: 15px;

    box-shadow:
        0 0 0 7px
        rgba(209, 162, 84, 0.08),
        0 4px 12px
        rgba(0, 0, 0, 0.2);
}


/* =========================================================
   VENUE CONTENT
========================================================= */

.dev1-cbox-past-recap-event-story_venue-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding:
        28px
        26px;
}


/* =========================================================
   VENUE TAG
========================================================= */

.dev1-cbox-past-recap-event-story_venue-tag {

    display: inline-flex;

    align-items: center;

    min-height: 29px;

    padding:
        6px
        13px;

    border:
        1px solid
        #f0dcae;

    border-radius: 17px;

    background: #fffaf0;

    color: #dfa738;

    font-size: 9px;

    line-height: 1;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


/* =========================================================
   VENUE HEADING
========================================================= */

.dev1-cbox-past-recap-event-story_venue-heading {

    margin:
        8px
        0
        15px;

    color: #17101d;

    font-size: 21px;

    line-height: 1.2;

    font-weight: 300;

    letter-spacing: -0.6px;
}


/* =========================================================
   VENUE DESCRIPTION
========================================================= */

.dev1-cbox-past-recap-event-story_venue-description {

    max-width: 650px;

    margin: 0;

    color: #2b202d;

    font-size: 13px;

    line-height: 1.7;

    font-weight: 300;
}


/* =========================================================
   VENUE BUTTON
========================================================= */

.dev1-cbox-past-recap-event-story_venue-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 43px;

    margin-top: 22px;

    padding:
        10px
        20px;

    border:
        1px solid
        #e2d9e5;

    border-radius:
        0
        0
        13px
        0;

    background: #ffffff;

    color: #632a72;

    font-size: 12px;

    line-height: 1;

    font-weight: 300;

    text-decoration: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.dev1-cbox-past-recap-event-story_venue-button:hover {

    background: #faf6fb;

    transform: translateY(-2px);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .dev1-cbox-past-recap-event-story_title {

        font-size: 49px;
    }


    .dev1-cbox-past-recap-event-story_venue-title h2 {

        font-size: 45px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .dev1-cbox-past-recap-event-story_container {

        width: calc(100% - 160px);
    }


    .dev1-cbox-past-recap-event-story_story {

        grid-template-columns:
            minmax(0, 1fr)
            340px;

        gap: 45px;
    }


    .dev1-cbox-past-recap-event-story_title {

        font-size: 41px;

        letter-spacing: -1.6px;
    }


    .dev1-cbox-past-recap-event-story_highlight-card {

        padding:
            25px;
    }


    .dev1-cbox-past-recap-event-story_highlight-title {

        font-size: 24px;
    }


    .dev1-cbox-past-recap-event-story_venue-title h2 {

        font-size: 38px;
    }


    .dev1-cbox-past-recap-event-story_venue-card {

        width: calc(100% - 45px);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .dev1-cbox-past-recap-event-story {

        padding-top: 35px;

        padding-bottom: 55px;
    }


    .dev1-cbox-past-recap-event-story_container {

        width: calc(100% - 80px);
    }


    .dev1-cbox-past-recap-event-story_story {

        display: flex;

        flex-direction: column;

        gap: 35px;
    }


    .dev1-cbox-past-recap-event-story_highlight-card {

        width: 100%;

        max-width: 430px;
    }


    .dev1-cbox-past-recap-event-story_title {

        font-size: 38px;
    }


    .dev1-cbox-past-recap-event-story_description {

        max-width: 100%;
    }


    .dev1-cbox-past-recap-event-story_venue {

        margin-top: 40px;
    }


    .dev1-cbox-past-recap-event-story_venue-card {

        width: 100%;

        grid-template-columns:
            1fr
            1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .dev1-cbox-past-recap-event-story {

        padding-top: 30px;

        padding-bottom: 45px;
    }


    .dev1-cbox-past-recap-event-story_container {

        width: calc(100% - 32px);
    }


    .dev1-cbox-past-recap-event-story_story {

        gap: 28px;
    }


    .dev1-cbox-past-recap-event-story_eyebrow {

        gap: 8px;
    }


    .dev1-cbox-past-recap-event-story_eyebrow-line {

        width: 27px;

        height: 2px;
    }


    .dev1-cbox-past-recap-event-story_eyebrow-text {

        font-size: 8px;

        letter-spacing: 0.7px;
    }


    .dev1-cbox-past-recap-event-story_title {

        font-size: 31px;

        line-height: 1.13;

        letter-spacing: -1px;
    }


    .dev1-cbox-past-recap-event-story_description {

        margin-top: 18px;
    }


    .dev1-cbox-past-recap-event-story_description p {

        margin-bottom: 15px;

        font-size: 12px;

        line-height: 1.75;
    }


    .dev1-cbox-past-recap-event-story_quote {

        margin-top: 25px;

        padding:
            12px
            0
            12px
            17px;

        font-size: 12px;

        line-height: 1.7;
    }


    .dev1-cbox-past-recap-event-story_highlight-card {

        padding:
            22px
            20px;

        border-radius: 20px;
    }


    .dev1-cbox-past-recap-event-story_highlight-title {

        margin-top: 15px;

        font-size: 22px;
    }


    .dev1-cbox-past-recap-event-story_highlight-description {

        font-size: 10px;

        line-height: 1.65;
    }


    .dev1-cbox-past-recap-event-story_highlight-item {

        min-height: 52px;

        padding:
            9px
            13px;
    }


    .dev1-cbox-past-recap-event-story_highlight-value {

        font-size: 16px;
    }


    .dev1-cbox-past-recap-event-story_highlight-label {

        font-size: 9px;
    }


    .dev1-cbox-past-recap-event-story_highlight-button {

        min-height: 46px;

        font-size: 10px;
    }


    .dev1-cbox-past-recap-event-story_venue {

        margin-top: 35px;
    }


    .dev1-cbox-past-recap-event-story_venue-title {

        margin-bottom: 19px;
    }


    .dev1-cbox-past-recap-event-story_venue-title h2 {

        font-size: 31px;

        line-height: 1.12;

        letter-spacing: -1px;
    }


    .dev1-cbox-past-recap-event-story_venue-card {

        display: flex;

        flex-direction: column;

        width: 100%;

        border-radius:
            18px
            0
            18px
            0;
    }


    .dev1-cbox-past-recap-event-story_venue-image {

        min-height: 190px;
    }


    .dev1-cbox-past-recap-event-story_venue-content {

        padding:
            22px
            20px;
    }


    .dev1-cbox-past-recap-event-story_venue-heading {

        font-size: 18px;

        margin:
            7px
            0
            11px;
    }


    .dev1-cbox-past-recap-event-story_venue-description {

        font-size: 11px;

        line-height: 1.7;
    }


    .dev1-cbox-past-recap-event-story_venue-button {

        min-height: 40px;

        margin-top: 17px;

        padding:
            9px
            17px;

        font-size: 10px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .dev1-cbox-past-recap-event-story_container {

        width: calc(100% - 24px);
    }


    .dev1-cbox-past-recap-event-story_title {

        font-size: 28px;
    }


    .dev1-cbox-past-recap-event-story_description p {

        font-size: 11px;
    }


    .dev1-cbox-past-recap-event-story_quote {

        font-size: 11px;
    }


    .dev1-cbox-past-recap-event-story_highlight-card {

        padding:
            20px
            17px;
    }


    .dev1-cbox-past-recap-event-story_highlight-title {

        font-size: 20px;
    }


    .dev1-cbox-past-recap-event-story_venue-title h2 {

        font-size: 28px;
    }


    .dev1-cbox-past-recap-event-story_venue-image {

        min-height: 165px;
    }

}