.hero__section {
    margin-top: 4.25rem;
    background: linear-gradient(
            90deg,
            #0f0d0a 30.51%,
            rgba(72, 59, 51, 0.073) 96.76%
        ),
        url("https://res.cloudinary.com/deklnqsqn/image/upload/v1733734648/mve4nnmw7xviwacgm6p9.png");

    color: white;
    background-position: center;
    height: 50vh;
    min-height: 600px;
    display: grid;
    place-content: center;
}
.hero__section .badge {
    border-radius: 8px;
    text-align: center;
    padding: 0.5rem 1.5rem;
    background-color: #81401c;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 1.2rem;
}
.hero__section ul {
    list-style-type: none;
}
.hero__section ul li {
    font-weight: 300;
    font-size: 0.85rem;
    line-height: 1.375rem;
    display: flex;
    align-items: start;
    gap: 5px;
    margin-bottom: 0.7rem;
}
.hero__section ul li span:first-child {
    display: flex;
    align-items: center;
}
.hero__section ul li:last-child {
    grid-column-start: 1;
    grid-column-end: 4;
}
.hero__section h1 {
    font-weight: 300;
    line-height: 2rem;
    font-size: 1.875rem;
}
.hero__section .container > div:nth-of-type(1) {
    margin: 1rem 0 1.5rem;
}
.hero__section .container a {
    background-color: var(--primary);
    width: 100%;
    /* width: 221px; */
    text-decoration: none;
    color: white;
    font-size: 0.84rem;
    line-height: 1.146rem;
    padding: 0.8rem 2.5rem;
    text-align: center;
    display: inline-block;
}

.mob-nav {
    padding: 1rem 0;
}
.mob-nav a {
    text-decoration: none;
    color: var(--primary);
}

.mob-nav a {
    position: relative
}

.mob-nav a::after {
    content: '/';
    position: absolute;
}
/* event details */
.youtube__section {
    text-align: center;
    padding: 2.5rem 0;
}
.youtube__section h2 {
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 2.3rem;
    padding-bottom: 1.5rem;
    text-align: left;
}
.event-details__section {
    position: relative;
    padding: 2.5rem 0;
}
.event-details__section ul{
    list-style-position: inside;
}
.event-details__section aside ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.event-details__section aside div:first-child,
.event-details__section aside ul li {
    background-color: #f8f8f9;
    list-style: none;
    padding: 1.5rem;
}
.event-details__section aside div:first-child {
    border-top: 2px solid var(--primary);
}
.event-details__section h2,
p,
li,
h3,
a {
    font-weight: 300;
}
.event-details__section aside h3 {
    font-size: 1.3rem;
    padding-bottom: 1rem;
}
.event-details__section aside div {
    padding-bottom: 1rem;
}
.event-details__section aside div:last-of-type {
    padding-bottom: 0;
}
.event-details__section aside div span {
    display: inline-block;
    width: 100%;
}
.event-details__section aside div span:nth-child(2) {
    color: #3a3938;
    font-size: 0.875rem;
}
.event-details__section aside .link-wrapper a {
    text-decoration: none;
    color: white;
    background-color: var(--primary);
    text-align: center;
    width: 100%;
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
    display: inline-block;
}

.event-details__section .more-events a {
    text-decoration: none;
    color: white;
    background-color: var(--primary);
    text-align: center;
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
    display: inline-block;
}
.event-details__section  .more-events {
   text-align: left;
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}
.event-details__section button {
    border: none;
    cursor: pointer;
}
@media (min-width: 768px) {
    /* hero section */
    .hero__section .container a {
        width: 221px;
    }
    .hero__section ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 400px;
        gap: 3px;
    }
    .hero__section h1 {
        line-height: 3.75rem;
        font-size: 2.625rem;
    }
    .hero__section ul li {
        align-items: center;
    }
    .hero__section {
        display: block;
    }
    /* event details */
    .event-details__section {
        position: relative;
        padding: 4rem 0;
    }
    .event-details__section .container {
        position: relative;
        display: flex;
        gap: 3rem;
    }
    .event-details__section aside {
        position: sticky;
        top: 100px;
        align-self: start;
    }
    .event-details__section .container aside {
        flex: 1 1 30%;
    }
    .event-details__section .container > div > div {
        margin-bottom: 2rem;
    }
    .event-details__section .container h2 {
        font-size: 1.875rem;
    }
    .event-details__section .container p {
        font-size: 1rem;
        padding-top: 0.5rem;
        line-height: 1.875rem;
    }
}