(One intermediate revision by the same user not shown) | |||
Line 74: | Line 74: | ||
} | } | ||
.mainBlock .main-prizes .otherItems .item { | .mainBlock .main-prizes .otherItems .item { | ||
− | + | margin: 0 10px; | |
} | } | ||
.mainBlock .main-prizes .otherItems .item img { | .mainBlock .main-prizes .otherItems .item img { | ||
Line 118: | Line 118: | ||
font-size: 2.3em | font-size: 2.3em | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
.mainBlock .nominations { | .mainBlock .nominations { | ||
width: 60vw; | width: 60vw; |
Latest revision as of 23:35, 3 December 2020
main {
justify-content: center;
} main #index{ display: none }
.mainBlock {
width: 80vw;
} .mainBlock h3, .mainBlock h2 {
text-transform: uppercase; text-align: center;
margin: 20px 0 20px 0 !important; font-family: 'montserrat-bold'; } .mainBlock a {
text-decoration: none; color: #121212; display: flex; flex-direction: column; align-items: center;
} .mainBlock .item {
display: flex; flex-direction: column; align-items: center;
} .mainBlock .item.grandPrize {
flex-flow: column-reverse; width: 70vw; margin: 0 auto;
} @media screen and (min-width: 768px) {
.mainBlock .item.grandPrize h3 { font-size: 2.3em }
} .mainBlock .item.grandPrize img {
width: 40vw; max-width: 300px;
} .mainBlock .main-prizes {
display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;
} .mainBlock .main-prizes h3 {
font-size: 2vw;
} @media screen and (min-width: 1024px) {
.mainBlock .main-prizes h3 { font-size: 1.5em; }
} @media screen and (max-width: 767px) {
.mainBlock .main-prizes h3 { font-size: 4vw; }
} @media screen and (max-width: 767px) {
.mainBlock .main-prizes > .grandPrize { display: none; }
} .mainBlock .main-prizes .otherItems {
display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(min-content, max-content); gap: 10px 10px; width: 70vw; margin: 0 auto;
} .mainBlock .main-prizes .otherItems .item {
margin: 0 10px;
} .mainBlock .main-prizes .otherItems .item img {
width: 15vw; height: 15vw; max-width: 160px; max-height: 160px;
} @media screen and (max-width: 767px) {
.mainBlock .main-prizes .otherItems .item img { width: 35vw; height: 35vw; max-width: 160px; max-height: 160px; }
} .mainBlock .main-prizes .otherItems .grandPrize {
display: none;
} @media screen and (max-width: 767px) {
.mainBlock .main-prizes .otherItems .grandPrize { display: flex; flex-flow: column; width: initial; margin: 0; }
} @media screen and (max-width: 767px) {
.mainBlock .main-prizes .otherItems { grid-template-columns: 1fr 1fr; width: 80vw; margin: 30px 0; }
} @media screen and (max-width: 767px) {
.mainBlock .main-prizes { display: block; }
} .mainBlock .title {
padding-top: 50px; font-family: "montserrat-bold";
font-size: 2.3em }
.mainBlock .nominations {
width: 60vw; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; margin: 0 auto; align-items: baseline; justify-items: center; padding: 50px 0;
} .mainBlock .nominations h3 {
font-size: 1.5vw;
} @media screen and (min-width: 1024px) {
.mainBlock .nominations h3 { font-size: 1.2em; }
} @media screen and (max-width: 767px) {
.mainBlock .nominations h3 { font-size: 3.5vw; }
} .mainBlock .nominations img {
width: 10vw; height: 10vw; max-width: 130px; max-height: 130px; min-width: 80px; min-height: 80px;
} .mainBlock .nominations .item {
width: 15vw;
} @media screen and (max-width: 767px) {
.mainBlock .nominations { grid-template-columns: 1fr 1fr; width: 80vw; }
}