body {
margin: 0;
overflow-x: hidden;
background-image: url(landing-savyan-tlo-web-min.jpg);
background-position: top;
background-size: cover;
}
.container1 {
width: 100vw;
background-size: contain;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4vw;
margin-top: 4vw;
}
.album1 {
margin-top: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.album1Img {
width: 15vw;
height: auto;
}
.zamow1 {
width: 16vw;
height: auto;
cursor: pointer;
}
.logo1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.logoBlack {
width: 16vw;
height: auto;
}
.button1 {
width: 8vw;
height: auto;
cursor: pointer;
margin-top: -1.5vw;
}
.brightness:hover {
filter: brightness(0.7);
cursor: pointer;
}
.container2 {
width: 99vw;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
row-gap: 2vw;
}
.container3 {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 90vw;
margin: auto;
margin-top: 50px;
}
.container4 {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 80vw;
margin: auto;
}
.album2Img {
width: 20vw;
height: auto;
}
.zamow3 {
display: flex;
align-items: center;
justify-content: space-between;
width: 15vw;
margin: auto;
flex-wrap: wrap;
}
.baiselSmall {
margin-bottom: 15px;
margin-top: 15px;
width: 5.5vw;
height: auto;
}
.tidalSmall {
width: 4.7vw;
height: auto;
margin-left: -2vw;
}
.spotifySmall {
width: 4.7vw;
height: auto;
margin-left: -2vw;
}
.sm {
width: 15vw;
}
.container4 .zamow3 {
margin-top: -3vw;
}
.container4 .baiselSmall {
width: 10vw;
}
.container4 .tidalSmall {
width: 3.7vw;
}
.container4 .spotifySmall {
width: 3.7vw;
}
.container5 {
display: flex;
width: 60vw;
align-items: center;
justify-content: space-between;
margin-top: 50px;
}
.ico1 {
width: 8vw;
height: auto;
}
.ico2 {
width: 8vw;
height: auto;
}
.ico3 {
width: 5vw;
height: auto;
}
.ico4 {
width: 12vw;
height: auto;
}
.ico5 {
width: 8vw;
height: auto;
}
.containerUp {
display: flex;
width: 100vw;
}
.zmianka {
background-image: url(tlo-2-mobile-ds.jpg);
background-position: right;
}
.zmianka .album1 {
padding-right: 10vw;
padding-left: 0;
}
.napis {
padding-left: 3vw;
}
.ikonka-small {
width: 1.9vw;
display: block;
}
.break {
height: 0;
}
.album-duzy {
display: block;
width: 30vw;
margin-bottom: 50px;
}
.zamow-duze {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 30vw;
}
.ikonka-big {
display: block;
width: auto;
height: 4vw;
}
.baisel-big {
display: block;
width: auto;
height: 4vw;
}
.albumBox1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.loga {
width: 50vw;
display: block;
margin: auto;
margin-top: 4vw;
margin-bottom: 4vw;
filter: invert(1);
}
.ostatni {
grid-column-start: 3;
grid-column-end: 4;
}
@media screen and (max-width: 768px) {
.loga {
width: 95vw;
}
body {
background-image: url(landing-savyan-tlo-mob-min.jpg);
background-size: cover;
}
.ikonka-small {
width: 8.5vw;
display: block;
}
.albumBox1 {
display: flex;
flex-direction: column;
align-items: center;
}
.break {
display: none;
}
.zamow3 {
width: 98vw;
margin-top: 25px;
margin-bottom: 25px;
flex-wrap: nowrap;
justify-content: space-around;
}
.zamow-duze {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100vw;
margin-bottom: 50px;
}
.ikonka-big {
display: block;
width: 10vw;
height: auto;
}
.baisel-big {
display: block;
width: 29vw;
height: auto;
}
.album-duzy {
width: 90vw;
height: auto;
}
.container1 {
width: 100vw;
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.zmianka {
background-image: url(tlo-2-mobile-ds.jpg);
background-position: center;
}
.album1 {
padding-left: 0px;
}
.album1Img {
width: 65vw;
height: auto;
}
.logo1 {
padding-left: 0vw;
}
.zamow1 {
width: 50vw;
}
.logoBlack {
width: 30vw;
height: auto;
}
.button1 {
width: 15vw;
height: auto;
margin-bottom: -5vw;
cursor: pointer;
}
.album2Img {
width: 50vw;
height: auto;
}
.container3 {
width: 100vw;
flex-wrap: wrap;
}
.baiselSmall {
width: 25vw;
height: auto;
}
.tidalSmall {
width: 13vw;
height: auto;
margin-left: -6vw;
}
.spotifySmall {
width: 13vw;
height: auto;
margin-left: -6vw;
}
.container4 {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100vw;
margin: auto;
flex-wrap: wrap;
}
.container2 {
display: block;
width: 100vw;
height: auto;
}
.container4 .baiselSmall {
width: 35vw;
}
.sm {
width: 50vw;
}
.container4 .tidalSmall {
width: 13vw;
}
.container4 .spotifySmall {
width: 13vw;
}
.container5 {
display: flex;
width: 90vw;
align-items: center;
justify-content: space-between;
}
.ico1 {
width: 20vw;
height: auto;
}
.ico2 {
width: 15vw;
height: auto;
}
.ico3 {
width: 12vw;
height: auto;
}
.ico4 {
width: 22vw;
height: auto;
}
.ico5 {
width: 15vw;
height: auto;
}
.containerUp {
display: flex;
flex-direction: column;
}
}