Main Page/styles.css

/*==================================================

MAIN PAGE

=
=====================================*/

.mainpage { text-align: center; border-radius: 10px; }

.mainpage-block { border-radius: 2em; border: 2px solid var(--primary-color, #711520); }

.mainpage-container { display: grid; grid-auto-flow: row dense; gap: 5px 5px; align-content: stretch; justify-items: stretch; }

.main-flex-container { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; }

.main-flex-item { flex: 1; margin: 0 auto; display: block; padding: 0 20px; }

.main-img { width: 360px; max-height: 275px; } .main-img img { max-width: 100%; width: 360px; max-height: 275px; height: auto; object-fit: contain; }

@media (max-width: 1500px) { .main-flex-container { display: block; }	.main-img { max-height: none; }	.main-img img { width: 360px; max-height: none; height: auto; } }

@media (min-width: 851px) { .mainpage-container { grid-template-columns: 1fr 1fr; }	.mainpage { width: 100%; } } @media (max-width: 850px) { .mainpage { width: 98%; } }