.homepage-banner,
.banner-container,
.banner-container__content,
.banner-container__content__img {
    width: 100%;
    height: 600px;
}

.homepage-banner {
    position: relative;
    background-color: var(--wp--preset--color--primary);
}

.banner-container__content {
    position: relative;
    transition: .2s linear;
    opacity: 1;
}

.banner-container__content.hidden {
    opacity: 0;
}

.banner-container__content__img {
    object-fit: cover;
    object-position: 65%;
}

.banner-container__content__text {
    position: absolute;
    width: 35%;
    left: 30%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 772px) {
    .banner-container__content__text {
        width: auto;
        left: 40%;
        top: 50%;
    }
}

.banner-container .wp-block-button.is-style-fill .wp-block-button__link,
.banner-container .wp-block-button.is-style-fill .wp-block-button__link:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--wp--preset--color--secondary) !important;
}

.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 10px;
    transition: .2s linear;
    opacity: 0;
}

.spinner svg {
    width: 100%;
    height: 100%;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.homepage-banner.loading .spinner {
    opacity: 1;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}