/* @group @variables */

[class*="o-seccion"] {
--grid-template-columns: repeat(1, 1fr);
--gap: 3.375rem;
--padding: 3.75rem var(--x-padding-right) 4.5rem var(--x-padding-left);
--background-color: hsla(220, 5%, 20%, .75);
--color: var(--color-white);
}

/* @end @variables */

/* @group @o-seccion */

[class*="o-seccion"] {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: var(--grid-template-columns);
gap: var(--gap);
padding: var(--padding);
box-shadow: var(--box-shadow);
color: var(--color-white);
}

[class*="o-seccion"]:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
object-fit: cover;
background-color: var(--background-color);
}

/* @end @o-seccion */