Files
Popsu-coloque/web/themes/custom/colloque2024/css/components/hero.scss
T
2024-04-16 21:32:42 +02:00

99 lines
1.6 KiB
SCSS

body{
overflow-x: hidden;
}
.home{
.__img-hero{
display: none;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
}
.__img-hero{
height: 300px;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
img{
width:100%;
height: 100%;
object-fit: cover;
}
}
.participant_full{
flex-direction: column;
margin-top: 2rem;
@media screen and (min-width: 992px) {
margin-top: 0rem;
}
.hero{
figure{
width:100%;
.__img{
&> div{
margin: auto;
width: 250px;
height: 250px;
}
img{
border-radius: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
}
figcaption {
align-self: center;
text-align: center;
margin: 2rem 0;
}
}
}
}
@media screen and (min-width: 768px) {
.__img-hero{
height: 500px;
width: auto;
position: relative;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 768px) {
.participant_full{
.hero{
figure{
width:100%;
.__img{
margin-right: 2rem;
&> div{
width: 300px;
height: 300px;
}
img{
border-radius: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
}
figcaption {
align-self: center;
text-align: left;
}
}
}
}
}