:root {
    --boxed-desktop: 1340px;
    /* --boxed-desktop: calc(100vw - 100px); */

    --boxed-laptop: 1180px;
    /* --boxed-laptop: 1120px; */
    /* --boxed-laptop: calc(100vw - 80px); */

    --boxed-tablet-landscape: 1080px;
    /* --boxed-tablet-landscape: calc(100vw - 60px); */

    --boxed-tablet-portrait: 980px;
    /* --boxed-tablet-portrait: 920px; */
    /* --boxed-tablet-portrait: calc(100vw - 40px); */

    --boxed-mobile-landscape: 820px;
    /* --boxed-mobile-landscape: 720px; */
    /* --boxed-mobile-landscape: calc(100vw - 30px); */

    --boxed-mobile-portrait: 720px;
    /* --boxed-mobile-portrait: 620px; */
    /* --boxed-mobile-portrait: calc(100vw - 40px); */
    /* --boxed-mobile-portrait: calc(100vw - 20px); */
}

/* ========================
   Base styles (mobile-first)
   ======================== */

/* Extra small devices (tiny phones) */
@media screen and (max-width: 380px) {
    /* Styles for very tiny phones */
}

/* Small phones */
@media screen and (max-width: 480px) {
    /* Styles for extra small phones */
}

/* Mobile landscape */
@media screen and (max-width: 767px) {
    /* Styles for portrait tablets & large phones */
}

/* Medium devices (tablets portrait) */
@media screen and (max-width: 991px) {
    /* Styles for landscape tablets / medium devices */
}

/* Small laptops / tablets landscape */
@media screen and (max-width: 1024px) {
    /* Styles for small laptops or tablet landscape */
}

/* Standard laptops / large tablets */
@media screen and (max-width: 1200px) {
    /* Styles for standard desktops / smaller laptops */
}

/* Large desktops */
@media screen and (max-width: 1366px) {
    /* Styles for large desktops */
}

/* Extra large desktops */
@media screen and (min-width: 1367px) {
    /* Styles for extra large desktops */
}