/*
Este root está definido en el archivo global styles.css, esto es solo para referencia.
:root {
    --dark-color: #333333;
    --dark-gray-color: #555555;
    --gray-color: #aaaaaa;
    --light-gray-color: #e7e7e7;
    --light-color: #ffffff;
    --primary-color: #0a212e;
    --secondary-color: #e4e47f;
    --terciary-color: #6f6f4b;
    --light-shadow: #00000038;
    --transition: 250ms;
    --bold-font: 800;
    --thin-font: 300;
    --font-family-primary: 'Montserrat';
    --font-family-secondary: 'Oswald';
}
*/

.sbanner {
    width: 100%;
    padding: 0 1.5rem;
    .sbanner__content {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        border-radius: 20px;
        overflow: hidden;
        transition: var(--transition);
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        &:hover {
            transform: scale(1.02);
            box-shadow: 20px 20px 10px var(--light-shadow);
        }
    }
}

.sbanner__placeholder {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-color);
}