body {
background-color: rgb(0, 0, 0);
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0px;
}
.title {
text-align: center;
font-size: 60px;
font-weight: bold;
margin-bottom: -50px;
}
.subtitle {
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
.paragraph {
text-align: justify;
font-size: 15px;
margin-right: 100px;
margin-left: 100px;
}
.row::after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 100%;
}
.col-2 {
width: 16.5%;
padding: 5px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
text-align: center;
}
.col-4 {
width: 33%;
padding: 5px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.col-6 {
width: 50%;
padding: 5px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.box {
padding: 8px;
background-color: rgb(0, 0, 0);
margin-bottom: 5px;
text-align: center;
}
.art-image {
border: 1px solid gray;
padding: 7px;
width: 150px;
height: 150px;
object-fit:scale-down;
}
.art-title {
margin-top: 10px;
font-weight: bold;
margin-bottom: 5px;
}
.art-link {
text-decoration: none;
color: #ffffff;
font-size: 15px;
}
@media (max-width: 767px) {
.column {
width: 100%;
}
.col-2,
.col-4,
.col-6 {
width: 100%;
}
.art-image {
border: 1px solid rgb(0, 0, 0);
padding: 7px;
width: 140px;
height: 140px;
object-fit:contain;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-4,
.col-6 {
width: 50%;
}
}