.main-banner {
    display: flex;
    position: relative;
    background: var(--background-color);
    width: 100%;
    aspect-ratio: 816 / 712;
    background-image: url(/resources/banners/banner_wine_blending_info.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.end-banner {
    display: flex;
    position: relative;
    background: var(--background-color);
    width: 100%;
    aspect-ratio: 604 / 380;
    background-image: url(/resources/banners/banner_info_end.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.end-banner .arrow {
    margin-left: auto;
    margin-top: auto;
    width: 24px;
    height: 24px;
    padding: 14px;
    margin-right: 6px;
    margin-bottom: 6px;
    cursor: pointer;
}



.banner-text {
    position: absolute;
    color: black;
    font-family: Arial, sans-serif;
}

.title span {
    padding: 8px;
    background: linear-gradient(
            to top,
            transparent 10%,
            var(--salad-color) 10%,
            var(--salad-color) 40%,
            transparent 40%
    );
}

.title {
    font-weight: 500;
    top: 0;
    left: 0;
    margin: 0;
    font-size: max(64px, calc(64 * calc((66vw - 200px) / 1240))); /* 64px * scale */
    line-height: max(88px, calc(88 * calc((66vw - 200px) / 1240))); /* 88px * scale */
    color: var(--primary-text-color);
}


.description {
    margin: 0;
    max-width:  max(489px, calc(489 * calc((66vw - 200px) / 1240)));
    min-width: max(489px, calc(489 * calc((66vw - 200px) / 1240)));

    font-weight: 300 !important;


    text-align: start;

    top: 14%;
    left: 0%;

    font-size: max(18px, calc(18 * calc((66vw - 200px) / 1240))); /* 18px * scale */
    line-height: max(22px, calc(22 * calc((66vw - 200px) / 1240))); /* 24px * scale */

    color: var(--secondarty-text-color);
}

.banner-section p {
    font-size: max(18px, calc(18 * calc((66vw - 200px) / 1240))); /* 18px * scale */
    line-height: max(22px, calc(24 * calc((66vw - 200px) / 1240))); /* 24px * scale */
    color: var(--secondarty-text-color);
    font-weight: 300;
}

.banner-section h2 {
    font-weight: 500;
    top: 0;
    left: 0;
    margin: 0;
    font-size: max(22px, calc(22 * calc((66vw - 200px) / 1240))); /* 64px * scale */
    line-height: max(28px, calc(28 * calc((66vw - 200px) / 1240))); /* 88px * scale */
    color: var(--primary-text-color);
}

.map-banner {
    display: grid;
    position: relative;
    background: var(--background-color);
    width: 100%;
    aspect-ratio: 1240 / 620;
    background-image: url(/resources/banners/banner_world_map.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: 64px 0;
}

.country {
    cursor: pointer;
    transition: all 1s;
}

.country-box {
    margin-top: auto;
    height: fit-content;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    background: var(--salad-color);
    border-radius: 20px;
    padding: 20px;
    max-width: 300px;
    z-index: 10001;
    opacity: 0;
    transition: all 0.5s;
    pointer-events: none;
}

.country-box.visible {
    opacity: 1;
}

.country-box p, .country-box h3, .country-box h4 {
    margin: 0;
    font-weight: 400;
}

.country-box h3 {
    margin-bottom: 2px;
}

.country-box h4 {
    margin-bottom: 4px;
}

.country-box p {
    color: var(--secondarty-text-color);
}

#italy {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    top: 23.2%;
    left: 47.0%;
    width: max(45px, calc(45 * ((66vw - 200px) / 1240)));
    height: max(48px, calc(48 * ((66vw - 200px) / 1240)));
}

#usa {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    top: 6.6%;
    left: 0.08%;
    width: max(313px, calc(313 * ((66vw - 200px) / 1240)));
    height: max(205px, calc(205 * ((66vw - 200px) / 1240)));
}

#australia {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    top: 66.0%;
    left: 80.85%;
    width: max(163px, calc(163 * ((66vw - 200px) / 1240)));
    height: max(156px, calc(156 * ((66vw - 200px) / 1240)));

}

#spain {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    top: 25.6%;
    left: 42.2%;
    width: max(47px, calc(47 * ((66vw - 200px) / 1240)));
    height: max(36px, calc(36 * ((66vw - 200px) / 1240)));
}

#france {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    top: 20.3%;
    left: 43.7%;
    width: max(52px, calc(52 * ((66vw - 200px) / 1240)));
    height: max(45px, calc(45 * ((66vw - 200px) / 1240)));
}

#south-america {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    top: 71.4%;
    left: 21.8%;
    width: max(72px, calc(72 * ((66vw - 200px) / 1240)));
    height: max(177px, calc(177 * ((66vw - 200px) / 1240)));
}