/* ==========================================
UndefinedVerseOfficial
Responsive System
========================================== */

/* Large screens */

@media (min-width: 1440px) {
:root {
--container-width: 1280px;
}
}

/* Tablets and smaller laptops */

@media (max-width: 1024px) {
:root {
--header-height: 4rem;
}

.container-wide {
width: min(
calc(100% - 2 * var(--container-padding)),
var(--container-width)
);
}
}

/* Tablets */

@media (max-width: 768px) {
:root {
--container-padding: 1.25rem;
}

.desktop-only {
display: none !important;
}

.container {
width: calc(100% - 2 * var(--container-padding));
}

.section {
padding-block: var(--space-12);
}

.grid-4,
.grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

/* Mobile phones */

@media (max-width: 480px) {
:root {
--container-padding: 1rem;
--header-height: 3.75rem;
}

body {
font-size: 0.9375rem;
}

.container,
.container-wide,
.container-narrow {
width: calc(100% - 2 * var(--container-padding));
}

.section {
padding-block: var(--space-10);
}

.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: minmax(0, 1fr);
}

.mobile-only {
display: initial;
}

.mobile-stack {
flex-direction: column;
align-items: stretch;
}

.mobile-center {
text-align: center;
}

.mobile-full {
width: 100%;
}
}

/* Very narrow screens */

@media (max-width: 360px) {
:root {
--container-padding: 0.875rem;
}

.section {
padding-block: var(--space-8);
}

.row-between {
flex-wrap: wrap;
}
}

/* Touchscreen optimization */

@media (hover: none) and (pointer: coarse) {
a,
button {
-webkit-tap-highlight-color: transparent;
}
}

/* Landscape phones */

@media (max-height: 500px) and (orientation: landscape) {
.section {
padding-block: var(--space-8);
}
}