/* BLOCK: Guides */
.block-guides .text-content h2 {
    text-align: center;
    margin-bottom: 6.25rem;
}

.block-guides .main-video-wrapper {
    /* min-height: 31.25rem; */
    aspect-ratio: 2.452;
    /* border-radius: 1.5625rem; */
    overflow: hidden;
    clip-path: inset(0 round 1.5625rem);
}

.block-guides .overlay {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 3.125rem;
    justify-content: space-between;
    position: absolute;
    inset: 0;
    z-index: 10;
}

.block-guides .overlay .tag {
    padding: 0.625rem 0.75rem;
    background-color: var(--c-text-light);
    color: var(--c-primary);
    font-size: var(--font-13-11);
    font-weight: 600;
    border-radius: 0.5rem;
    align-self: flex-start;
}

.block-guides .overlay .title-wrapper {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.block-guides .overlay .title-wrapper .play-btn::before {
    left: 55%;
}

.block-guides .main-video-wrapper {
    position: relative;
}

.block-guides .main-video-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(260.89deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.5) 100%);
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
}









.block-guides .guides-wrapper {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.3125rem;
}

.block-guides .guides-wrapper .post--guide {
    padding: 1.875rem;
    border-radius: 1.5625rem;
    background-color: var(--c-bg-light-tint-1);
    display: flex;
    flex-direction: column;
    min-height: 15rem;
}

.block-guides .guides-wrapper .post__title {
    text-decoration: none;
}

.block-guides .guides-wrapper .post__excerpt {
    margin-top: 1.5625rem;
    margin-bottom: 0;
}

.block-guides .guides-wrapper .post__tags {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: auto;
}

.block-guides .guides-wrapper .post__tag {
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--c-text-light);
    color: var(--c-primary);
    font-size: var(--font-13-11);
    font-weight: 600;
}

.block-guides .guides-wrapper .post__tag--icon {
    flex-shrink: 0;
}

.block-guides .guides-wrapper .cta-more {
    background-color: var(--c-primary);
    padding: 2.5rem;
    border-radius: 1.5625rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
}

.block-guides .guides-wrapper .cta-more h4 {
    max-width: 90%;
    color: var(--c-text-light);
}

.block-guides .guides-wrapper .cta-more svg {
    color: var(--c-text-light);
    width: 1.25rem;
}

@media screen and (width <= 620px) {
    .block-guides .text-content h2 {
        max-width: 80%;
        margin: 0 auto 3.125rem;
    }
    .block-guides .overlay {
        padding: 1.5625rem;
    }
    .block-guides .main-video-wrapper {
        aspect-ratio: 1;
    }
    .block-guides .overlay .tag {
        padding: 0.375rem 0.5rem;
    }
    .block-guides .overlay .title-wrapper {
        gap: 0.9375rem;
    }
    .block-guides .guides-wrapper {
        margin-top: 0.75rem;
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        
        overflow-x: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-inline: calc(var(--pad) * -1);
        padding-inline: var(--pad);
        position: relative;
    }
    .block-guides .guides-wrapper .post--guide {
        flex: 0 0 calc(100vw / 1.5);
        min-height: auto;
        padding: 1.375rem;
        border-radius: 1.125rem;
        aspect-ratio: 1.5;
    }
    .block-guides .guides-wrapper .cta-more {
        padding: 1.375rem;
        border-radius: 1.125rem;
        flex: 0 0 calc(100vw / 1.5);
        aspect-ratio: 1.5;
    }
    .block-guides .guides-wrapper .post__excerpt {
        margin-top: 0.9375rem;
    }
}