ORIENT/themes/modern2/assets/new/styles/affiche/_affiche-item.scss

105 lines
1.6 KiB
SCSS

.affiche-item-inner {
padding: 4.6rem 0 8rem 0;
@include grid(false, 67% auto);
gap: 5rem;
}
.affiche-item-content {
@include flex(column);
gap: 2.3rem;
}
.affiche-item-head {
@include flex(column);
gap: 1.5rem;
h1 {
font-size: 2.4rem;
}
span {
font-size: 1.7rem;
color: $base-green;
}
}
.affiche-next,
.affiche-prev {
top: 40%;
}
.affiche-item-img {
@include imgStyle(unset, unset, cover);
justify-self: center;
align-self: center;
}
.affiche-item-top {
@include grid(false, 50% auto);
gap: 1.8rem;
.affiche-item-data {
gap: 1.5rem;
justify-self: flex-start;
align-self: center;
}
}
.affiche-item-bottom {
@include flex(column);
gap: 1rem;
font-size: 1.8rem;
}
.affiche-item-item {
@include flex(column);
gap: 2.3rem;
}
// Media
@media screen and (max-width: 1080px) {
.affiche-swiper-wrapper {
// display: inline-block;
max-width: calc(100vw - 8rem);
margin: 0 auto;
}
.affiche-item-inner {
grid-template-columns: 1fr;
}
.affiche-item-aside {
display: none;
}
.affiche-item-top {
@include flex(column-reverse);
}
.affiche-item-top {
.affiche-item-data {
justify-self: unset;
align-self: unset;
}
}
}
@media screen and (max-width: 1000px) {
.affiche-swiper-wrapper {
max-width: calc(100vw - 5rem);
}
}
@media screen and (max-width: 800px) {
.affiche-item-head {
flex-direction: column-reverse;
gap: 1rem;
h1 {
font-size: 1.9rem;
}
span {
font-size: 1.5rem;
color: $mild-gray;
}
}
.affiche-item-bottom {
font-size: 1.7rem;
}
}