h1 {
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -.004rem;
    margin-block-end: 1.5rem;
    @media (min-width: 720px) {
        font-size: 2rem;
        line-height: 2.5rem;
        margin-block-end: 3rem;
    }
}
header {
    a {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .25rem;
        color: oklch(55.2% 0.016 285.938);
        text-decoration: none;
        position: relative;
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 2rem;
            height: 1rem;
            background-position: 0 center;
            background-size: 1rem 1rem;
            background-repeat: no-repeat;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 32 32'%3E%3Cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 6.667 6.667 16 16 25.333M6.667 16h18.666'/%3E%3C/svg%3E%0A");
            overflow: hidden;
            opacity: 0;
            translate: -.5rem 0;
            transition: opacity, translate, .2s;
        }
        @media not (hover: none) {
            &:hover,
            &:focus-within {
                &::before {
                    opacity: 1;
                    translate: -1.125rem 0;
                }
            }
        }
        @media (min-width: 720px) {
            &::before {
                width: 3rem;
                height: 1.5rem;
                background-size: 1.5rem 1.5rem;
                translate: -.75rem 0;
            }
            @media not (hover: none) {
                &:hover,
                &:focus-within {
                    &::before {
                        translate: -1.625rem 0;
                    }
                }
            }
        }
        @media (min-width: 960px) {
            &::before {
                width: 3rem;
                height: 1.75rem;
                background-size: 1.75rem 1.75rem;
                translate: -1rem 0;
            }
            @media not (hover: none) {
                &:hover,
                &:focus-within {
                    &::before {
                        translate: -1.875rem 0;
                    }
                }
            }
        }
        @media (hover: none) {
            &::before {
                opacity: 1;
                translate: -1.125rem 0;
            }
            @media (min-width: 720px) {
                &::before {
                    translate: -1.625rem 0;
                }
            }
            @media (min-width: 960px) {
                &::before {
                    translate: -1.875rem 0;
                }
            }
        }
    }
}
.cover {
    padding: 5rem 0 2.5rem;
    ul {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
        width: calc(100% + 3rem);
        translate: -1.5rem 0;
        &::before {
            content: "";
            position: absolute;
            bottom: 0.5px;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: var(--line);
        }
        li {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: .5rem;
            b {
                display: block;
                width: 4rem;
                text-transform: uppercase;
                font-size: .625rem;
                line-height: 1rem;
                letter-spacing: .01rem;
                font-weight: 600;
                color: var(--icon);
            }
            span, a {
                color: var(--text);
                display: block;
                font-size: .875rem;
                line-height: 1.25rem;
                letter-spacing: -.006rem;
                i {
                    font-style: normal;
                    color: var(--line);
                }
            }
        }
        @media (min-width: 720px) {
            flex-direction: row;
            li {
                flex-direction: column;
                flex-grow: 1;
                gap: .5rem;
                align-items: flex-start;
                b {
                    width: auto;
                }
            }
        }
        @media (min-width: 960px) {
            padding: 2.5rem 1.5rem;
        }
    }
    @media (min-width: 720px) {
        padding: 6rem 0 2.5rem;
    }
    @media (min-width: 960px) {
        padding: 7rem 0 2.5rem;
    }
    @media (min-width: 1280px) {
        padding: 8rem 0 2.5rem;
    }
}
img.standard, video.standard {
    max-width: none;
    translate: -.25rem 0;
    width: calc(100% + .5rem);
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: .75rem;
    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 1.5rem;
    }
    @media (min-width: 720px) {
        width: 40rem;
        translate: -3rem 0;
        border-radius: 1.5rem;
        @supports (corner-shape: squircle) {
            corner-shape: squircle;
            border-radius: 3rem;
        }
    }
    @media (min-width: 960px) {
        width: 44rem;
        translate: 0 0;
        border-radius: 1.75rem;
        @supports (corner-shape: squircle) {
            corner-shape: squircle;
            border-radius: 3.5rem;
        }
        &.lg, &.md {
            width: 52rem;
            translate: -4rem 0;
            border-radius: 2rem;
            @supports (corner-shape: squircle) {
                corner-shape: squircle;
                border-radius: 4rem;
            }
        }
    }
    @media (min-width: 1280px) {
        &.lg {
            width: 70rem;
            translate: -13rem 0;
            border-radius: 2.75rem;
            @supports (corner-shape: squircle) {
                corner-shape: squircle;
                border-radius: 5.5rem;
            }
        }
    }
}
.carousel {
    padding: 2.5rem 0;
}