@layer default, theme, custom;

* {
    box-sizing: border-box;
}

.col1 {  display: grid;
    --grid-columns: 1;
    grid-template-columns: auto;
    grid-gap: 0.5rem;
}

.col2 {  display: grid;
    --grid-columns: 2;
    grid-template-columns: 50% 50%;
    grid-gap: 0.5rem;
}
.grid-col4 {
    --grid-columns: 4;
}



.grid{
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), fit-content auto);
    grid-gap: 0.5rem;
    @media (min-width: 768px) {

        }
}

/*.imgpreview{
    height:100px;
    padding:1px;
}*/

.span-cols-grid {
    grid-column-start: 1;
    grid-column-end: calc(var(--grid-columns) * 2 + 1);
}

.span-cols-grid2 {
    grid-column-start: 1;
    grid-column-end: calc(var(--grid-columns) + 1);
}

.fill-width{
    width:100%;
}

.flex {
    display:flex;
        gap: 10px;
        flex-wrap: wrap;
}

.row1 {  display: grid;
    grid-template-rows: auto;
    grid-gap: 0.5rem;
}

.row2 {  display: grid;
    grid-template-rows: auto auto;
    text-align: center;
    grid-gap: 0.5rem;
}

.dx{
text-align: left;
}
.sx{
text-align: right;
}
.parallax {
        background-attachment: fixed;
        text-align: center;
    }
menu {
padding-inline-start: 0px;
}

menu#azione {
padding: 0.5rem;
margin:0.3rem;
display:inline-flex;
gap:1rem;
}

body {
margin:0px;
    min-width: fit-content;
}

body > video{
    opacity:100%;
    position:absolute;
    z-index:-1;
    width:100%;
    clip-path: inset(0 0 7vw 0);
}

body > header > menu {
display:inline-flex;
flex-grow:1;
    padding:10px;
    margin: auto 0px 1vh 0px;
    gap:10px;
}


body > header > #id_form_totalsearch{
flex-grow:0.1;
margin: auto 0px 1vh 0px;
}

/*.bodygrid {
  display: grid;
  grid-template-columns: auto;
  padding: 0;
  margin: 0;
  }*/

.errorlist{
list-style-type: none;
padding-inline-start:0px;
color:red;
}

/* SVG ICONS */
svg.maxi-icon,
img.maxi-icon{
margin: auto;
    height:calc(var(--icon-size)*1.5);
    width:calc(var(--icon-size)*1.5);
}

svg.mid-icon,
img.mid-icon{
margin: auto;
    height:calc(var(--icon-size)*1);
    width:calc(var(--icon-size)*1);
}

svg.mini-icon,
img.mini-icon{
margin: auto;
    height:calc(var(--icon-size)*0.5);
    width:calc(var(--icon-size)*0.5);
}

.sized-icon{
margin:auto;
    height:var(--icon-size);
    width:var(--icon-size);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
  }
}