.hero {
    --hero-background: #071d35;
    --hero-text: #ffffff;
    --hero-accent: #009fe3;
    --hero-label-background: #111c42;
    font-family: "Poppins", sans-serif;
    position: relative;
    overflow: hidden;
    min-height: 525px;
    background-color: var(--hero-background);
    background-image: url("../../../assets/images/Pattern-Banner1.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--hero-text);
    padding-inline: var(--space-xl);
}

.hero__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1775px;
    min-height: 525px;
}

.hero__company {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    /* padding: 60px 24px; */
    text-align: center;
}

.hero__eyebrow {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
}

.hero__logo {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.hero__logo img {
    display: block;
    width: auto;
    max-width: 240px;
    height: auto;
    max-height: 90px;
    object-fit: contain;
}

.hero__description {
    max-width: 450px;
    margin-top: 28px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.45;
}

.hero__description p {
    margin: 0;
}

.hero__auction {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--hero-accent);
    border: 1px solid rgba(255, 255, 255, 0.8);
    background-position: center;
    background-origin: border-box;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero__auction-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
}

.hero__auction-label {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 50px;
    padding: 0 21px;
    background-color: var(--hero-label-background);
    border-right: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom-right-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.hero__auction[hidden] {
    display: none;
}

button.hero__auction-label {
    margin: 0;
    border-top: 0;
    border-left: 0;
    border-radius: 0 0 4px 0;
    color: inherit;
    font-family: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

button.hero__auction-label:focus {
    background-color: var(--hero-label-background);
    border-color: rgba(255, 255, 255, 0.8);
    color: inherit;
}

button.hero__auction-label:hover,
button.hero__auction-label:focus-visible {
    background-color: #1c2b5e;
    color: inherit;
}

button.hero__auction-label:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

.hero__auction-title a {
    color: inherit;
    text-decoration: none;
}

.hero__auction-title a:hover,
.hero__auction-title a:focus-visible {
    color: inherit;
    text-decoration: underline;
}

.hero__bidding {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
}

.hero__bidding-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.hero__bidding-text strong {
    font-weight: 600;
}

.hero__flag {
    display: flex;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.hero__flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.hero__auction-title {
    position: relative;
    z-index: 2;
    color: #fff;
    margin: 0;
    padding: 20px 20px 16px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}

.hero__auction-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-top: auto;
}


.hero__auction-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
            #009fe3 0%,
            rgba(0, 159, 227, 0.85) 12%,
            rgba(0, 159, 227, 0.55) 35%,
            rgba(0, 159, 227, 0.30) 65%,
            rgba(0, 159, 227, 0.20) 100%);
    pointer-events: none;
}

.hero__auction-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Tablet
 * -------------------------------------------------------------------------- */

@media (min-width: 1240px) {
    .hero {
        min-height: 560px;
    }

    .hero__container {
        min-height: 560px;
    }

    .hero__company {
        /* padding: 70px 40px; */
    }

    .hero__eyebrow {
        font-size: 26px;
    }

    .hero__logo {
        margin-top: 30px;
    }

    .hero__logo img {
        max-width: 270px;
        width: 12rem;
    }

    .hero__description {
        margin-top: 30px;

        font-size: 26px;
    }

    .hero__auction-title {
        font-size: 32px;
    }
}

/*
 * Desktop
 * -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

    .hero {
        min-height: 525px;
    }

    .hero__container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(600px, 720px);
        /* padding-inline: 3rem; */
        min-height: 525px;
    }

    .hero__company {
        min-width: 0;
        /* padding: 40px 50px; */
    }

    .hero__eyebrow {
        font-size: 28px;
    }

    .hero__logo img {
        max-width: 285px;
    }

    .hero__description {
        max-width: 480px;

        font-size: 28px;
    }

    .hero__auction {
        min-width: 0;
        height: 100%;
    }

    .hero__auction-title {
        padding: 20px;
        font-size: 31px;
    }

    .hero__auction-image {
        aspect-ratio: auto;
        min-height: 200px;
        flex: 1;
    }

    .hero__auction-image img {
        position: absolute;
        inset: 0;
    }
}

/*
 * Large desktop
 * -------------------------------------------------------------------------- */

@media (min-width: 1440px) {

    .hero__container {
        grid-template-columns: minmax(0, 1fr) minmax(600px, 670px);
        /* padding-inline: 3rem; */
    }

    .hero__company {
        /* padding-inline: 60px !important; */
    }

    .hero__eyebrow {
        font-size: 29px !important;
    }

    .hero__logo {
        margin-top: 28px !important;
    }

    .hero__logo img {
        max-width: 290px !important;
    }

    .hero__description {
        margin-top: 28px !important;
        font-size: 29px !important;
        line-height: 1.35 !important;
    }

    .hero__auction-title {
        padding: 20px;
        font-size: 31px;
        line-height: 1.15;
    }
}

/* Very large screens */

@media (min-width: 1800px) {
    .hero__container {
        max-width: 1815px;
        grid-template-columns: minmax(0, 954px) minmax(0, 821px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero * {
        scroll-behavior: auto;
    }
}

.hero__auction-next::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
            #009fe3 0%,
            rgba(0, 159, 227, 0.85) 12%,
            rgba(0, 159, 227, 0.55) 35%,
            rgba(0, 159, 227, 0.30) 65%,
            rgba(0, 159, 227, 0.20) 100%) !important;

    pointer-events: none;
}

@media (max-width: 1024px) {
    .hero__auction {
        background: none !important;
        background-color: var(--hero-accent) !important;
    }
}