.simple-hero-component {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}

.simple-hero-component .frame {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    z-index: 2;
    width: 70%;
    height: 100%;
}

.simple-hero-component.bg-color-brand {
    background-color: #002c5f;
}

.simple-hero-component.bg-color-primary {
    background-color: #fff;
}

.simple-hero-component.bg-color-accent {
    background-color: #f6f3f2;
}

.simple-hero-component.bg-color-none {
    background: none;
}

.simple-hero-component.bg-image,
.simple-hero-component.bg-video {
    /* aspect-ratio: 1440 / 320; */
    min-height: 320px;
    height: auto;
}

.simple-hero-component.bg-image .content {
    display: flex;
    height: 100%;
    min-height: 320px;
    padding: 64px 0 64px 80px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    background:linear-gradient(
            90deg,
            rgba(0 0 0 / 54%) 0%,
            rgba(0 0 0 / 54%) 32%,
            rgba(0 0 0 / 0%) 100%
        ),
        linear-gradient(90deg, rgba(0 0 0 / 54%) 0%, rgba(0 0 0 / 0%) 100%),
        linear-gradient(90deg, rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 0%) 100%);
}

@media (min-width: 768px) {
    .simple-hero-component.bg-image .content {
        display: flex;
        padding: 64px 0 64px 80px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 24px;
        background:linear-gradient(
            90deg,
            rgba(0 0 0 / 54%) 0%,
            rgba(0 0 0 / 54%) 32%,
            rgba(0 0 0 / 0%) 100%
        ),
        linear-gradient(90deg, rgba(0 0 0 / 54%) 0%, rgba(0 0 0 / 0%) 100%),
        linear-gradient(90deg, rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 0%) 100%);
    }
}

.simple-hero-component.bg-video .content {
    display: flex;
    padding: 64px 0 64px 80px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 24px;
    background: linear-gradient(
            90deg,
            rgba(0 0 0 / 54%) 0%,
            rgba(0 0 0 / 54%) 32%,
            rgba(0 0 0 / 0%) 100%
        ),
        linear-gradient(90deg, rgba(0 0 0 / 54%) 0%, rgba(0 0 0 / 0%) 100%),
        linear-gradient(90deg, rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 0%) 100%);
}

.simple-hero-component.bg-video .content.no-scrim,
.simple-hero-component.bg-image .content.no-scrim {
    background: transparent;
}

.simple-hero-component.bg-color .content .content-text {
    display: flex;
    max-width: 1200px;
    padding: 64px 80px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.simple-hero-component.bg-video .text,
.simple-hero-component.bg-image .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.simple-hero-component.bg-video
    .text
    .eyebrow-title
    .simple-hero-component.bg-image
    .text
    .eyebrow-title {
    display: flex;
    max-width: 740px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.simple-hero-component .title {
    font-family: "HyundaiSansHead-Medium";
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 133.333%;
    max-width: 600px;
}

.simple-hero-component.bg-color .title {
    max-width: 740px;
    align-self: stretch;
}

.simple-hero-component .subtitle {
    font-family: "HyundaiSansText-Regular";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 155.556%;
    max-width: 600px;
}

.simple-hero-component.bg-color .subtitle {
    max-width: 740px;
    align-self: stretch;
}

.simple-hero-component.text-style-light .title,
.simple-hero-component.text-style-light .subtitle {
    color: #fff;
}

.simple-hero-component.text-style-dark .title,
.simple-hero-component.text-style-dark .subtitle {
    color: #000;
}

.simple-hero-component .gradient-scrim {
    display: flex;
    max-width: 400px;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;

    /* background: linear-gradient(
        90deg,
        rgb(0 0 0 / 54%) 0%,
        rgb(0 0 0 / 0%) 100%
    ); */
}

.simple-hero-component .video-control-padding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.simple-hero-component .video-control-padding .video-control {
    display: flex;
    margin: 0 80px 64px 0;
    align-items: flex-start;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    gap: 4px;
    border-radius: 4px;
    background: rgb(0 0 0 / 54%);
    cursor: pointer;
    border: none;
}

.simple-hero-component .video-control-padding .video-controls {
    display: flex;
    padding: 4px 8px;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-radius: 4px;
    background: rgb(0 0 0 / 54%);
}

.simple-hero-component .video-control .icon-icon-play::before,
.simple-hero-component .video-control .icon-icon-pause::before {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: #fff;
}

.simple-hero-component .video-control-padding .video-control .pause-text {
    color: #fff;
    font-family: "HyundaiSansText-Bold";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 133.333%;
}

.simple-hero-component .background-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.simple-hero-component .background-media .media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.simple-hero-component.alignmnet-top .content {
    justify-content: flex-start;
    width: 100%;
}

.simple-hero-component.alignmnet-centered .content {
    justify-content: center;
    width: 100%;
}

.simple-hero-component.alignmnet-bottom .content {
    justify-content: flex-end;
    width: 100%;
}

/* Tablet */
@media (max-width: 1199px) and (min-width: 768px) {
    .simple-hero-component .frame {
        width: 70%;
        height: 100%;
    }

    .simple-hero-component.bg-image,
    .simple-hero-component.bg-video {
        aspect-ratio: auto;
        min-height: 240px;
        height: auto;
    }

    .simple-hero-component.bg-color .content .content-text {
        padding: 32px 40px;
    }

    .simple-hero-component .title {
        max-width: 500px;
        font-size: 40px;
        line-height: 120%;
    }

    .simple-hero-component .subtitle {
        max-width: 500px;
    }

    .simple-hero-component .video-control-padding .video-control {
        margin: 0 40px 40px 0;
    }

    .simple-hero-component.bg-image .content,
    .simple-hero-component.bg-video .content {
        padding: 32px 0 32px 40px;
        min-height: 240px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .simple-hero-component.alignmnet-centered .content {
        justify-content: flex-end;
    }

    .simple-hero-component .frame {
        width: 100%;
        height: 100%;
    }

    .simple-hero-component.bg-image,
    .simple-hero-component.bg-video {
        /* aspect-ratio: 375 / 238; */
        aspect-ratio: auto;
        min-height: 240px;
        height: auto;
    }

    .simple-hero-component .title {
        max-width: 300px;
        align-self: stretch;
        font-size: 32px;
        line-height: 125%;
    }

    .simple-hero-component .subtitle {
        max-width: 300px;
        align-self: stretch;
        font-size: 16px;
        line-height: 137.5%;
    }

    .simple-hero-component.bg-video .subtitle,
    .simple-hero-component.bg-image .subtitle {
        line-height: 155.556%;
    }

    .simple-hero-component.bg-video .text,
    .simple-hero-component.bg-image .text {
        gap: 2px;
    }

    .simple-hero-component.bg-color .content .content-text {
        gap: 4px;
        padding: 48px 16px 24px;
    }

    .simple-hero-component .video-control-padding .video-control {
        margin: 0 16px 16px 0;
        bottom: auto;
        top: 24px;
    }

    .simple-hero-component .video-control-padding .video-controls {
        padding: 8px;
    }

    .simple-hero-component.bg-image .content,
    .simple-hero-component.bg-video .content {
        min-height: 240px;
        padding: 150px 16px 24px;
        background: linear-gradient(
        to top,
        rgba(0 0 0 / 54%) 0%,      /* Bottom: 54% opacity */
        rgba(0 0 0 / 54%) 32%,     /* Maintain 54% until 32% height */
        rgba(0 0 0 / 0%) 100%      /* Top: Fade to transparent */);
    }

    .simple-hero-component.bg-image.alignmnet-top .content,
    .simple-hero-component.bg-video.alignmnet-top .content {
        padding: 150px 16px 24px;
        min-height: 240px;

        /* background: rgba(0 0 0 / 54%) 50% / cover no-repeat; */
        background: linear-gradient(
        to bottom,
        rgba(0 0 0 / 54%) 0%,      /* Top: 54% opacity */
        rgba(0 0 0 / 54%) 32%,     /* Maintain 54% until 32% height from top */
        rgba(0 0 0 / 0%) 100%      /* Bottom: Fade to transparent */
        );
    }

    .simple-hero-component.bg-video .content.no-scrim,
    .simple-hero-component.bg-image .content.no-scrim {
        background: transparent;
    }

    .simple-hero-component .gradient-scrim {
        background: linear-gradient(
        to top,
        rgba(0 0 0 / 54%) 0%,      /* Bottom: 54% opacity */
        rgba(0 0 0 / 54%) 32%,     /* Maintain 54% until 32% height */
        rgba(0 0 0 / 0%) 100%      /* Top: Fade to transparent */);
        display: block;
    }
}