.mainPage__container {
background-color: #313238;
padding: 10px 10px 20px;
margin-bottom: 15px;
border: 5px solid #313238;
flex: 1;
}
.mainPage__container img {
max-width: 100%;
height: auto;
}
.mainPage__container-group {
display: inherit;
gap: 15px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.mainPage__searchBox {
text-align: center;
}
.mainPage__title-image {
max-width: 100%;
}
.mainPage__container-title {
text-align: center;
font-size: 24px;
font-weight: bold;
}
.mainPage__container-element-group {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
.mainPage__navElement {
min-width: 130px;
max-width: 130px;
min-height: 125px;
max-height: 125px;
position: relative;
overflow: hidden;
}
.mainPage__navElement-image {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
}
.mainPage__navElement-image img {
min-height: 100%;
object-fit: cover;
}
.mainPage__navElement-link {
position: absolute;
bottom: 0;
color: white;
background: rgba(0, 0, 0, 0.75);
width: 100%;
font-size: 16px;
min-height: 20px;
text-align: center;
}
.mainPage__container-featured {
position: relative;
max-height: 230px;
border: 5px solid #313238;
overflow: hidden;
margin-bottom: 15px;
}
.mainPage__container-featured__title {
position: absolute;
right: 0;
font-size: 24px;
font-weight: bold;
min-width: 125px;
text-align: center;
background: #313238;
border-radius: 0 0 0 10px;
}
.mainPage__container-featured__title p {
margin: 0.4em 0 0.5em 0;
}
.mainPage__container-featured__image {
width: 100%;
}
.mainPage__container-featured__image img {
width: 100%;
object-fit: cover;
object-position: top;
}
.mainPage__element {
background: #202126;
flex: auto;
width: 100%;
display: grid;
gap: 10px;
text-align: center;
padding: 10px;
}
.mainPage__element-text {
align-content: end;
}
@media (min-width: 1200px) {
.mainPage__container {
padding: 10px 40px 20px;
}
.mainPage__container-group {
display: flex;
margin-bottom: 0;
}
.mainPage__container-featured {
aspect-ratio: 2 / 1;
}
}
@media (min-width: 1200px) {
.mainPage__element {
flex: 1;
width: auto;
}
}