lostplaces-frontend/components/04_Templates/placeOverview/_placeOverview.scss

71 lines
1.5 KiB
SCSS

.LP-PlaceOverview{
.LP-PlaceOverview__Info{
.LP-PlaceOveriew__Image{
width: 700px;
max-height: 500px;
box-shadow: 0 0 10px $-grey;
object-fit: cover;
object-position: 0 0;
float: right;
margin-left: 35px;
margin-bottom: 35px;
overflow: hidden;
}
.LP-PlaceOverView__Description{
padding: 0px;
position: relative;
top: -15px;
.LP-Headline{
position: relative;
top: 15px;
margin-bottom: 30px;
}
}
}
.LP-PlaceOverView__ImageList{
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin: 0px;
padding: 0px;
.LP-PlaceOverView__ImageItem{
margin-top:10px;
.LP-Link{
overflow: hidden;
}
.LP-Image {
box-shadow: 0 0 5px $-grey;
height: 200px;
width: 290px;
object-fit: cover;
}
}
}
}
@media (max-width: $-viewport-normal){
.LP-PlaceOverview{
.LP-PlaceOverview__Info{
.LP-TextSection{
margin-top: 30px;
}
.LP-PlaceOveriew__Image{
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}
}
}