css main_slider
/* slider
----------------------/
.slide-wrap {
width: calc(100% - 1em);
padding: 0.5em;
background-color: #fbfbfb;/#edf9ff;*/
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
margin-bottom: 4px;
}
.slide-mask {
position: relative;
overflow: hidden;
//height: 240px;
aspect-ratio:3/1;
}
.slide-group {
position: absolute;
top: 0px;
left: 0;
width: 100%;
padding:0;
}
.slide {
//height: 240px;
aspect-ratio:3/1;
font: 100 90px/135px "lato";
font-size: 2em;
//color: #fff;
color:#222;
text-align: center;
text-transform: uppercase;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* nav ----------------------*/ .slide-nav { text-align: center; } .slide-nav ul { margin: 0; padding: 0; } .slide-nav li { display: inline-block; width: 10px; height: 10px; //background: rgb(175, 56, 56); background-color:#4dc3ff; cursor: pointer; margin-left: .5em; } .slide-nav li.current { background: rgb(144, 39, 39); background-color:#0099e6; } @media only screen and (max-width: 60em) { .slide-mask { aspect-ratio:3/1; //height: 140px; } .slide { aspect-ratio:3/1; //height: 140px; } }