Portfolio-DX/assets/styling/media.css

@media (min-width: 640px) {
    .container {
        max-width:640px
    }
}

@media (min-width: 768px) {
    .container {
        max-width:768px
    }
}

@media (min-width: 1024px) {
    .container {
        max-width:1024px
    }
}

@media (min-width: 1280px) {
    .container {
        max-width:1280px
    }
}

@media (min-width: 1536px) {
    .container {
        max-width:1536px
    }
}


@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .sm\:h-100px {
        height:100px
    }

    .sm\:min-h-\[250px\] {
        min-height:250px
    }

    .sm\:flex-row {
        flex-direction:row
    }

    .sm\:items-center {
        align-items:center
    }

    .sm\:gap-5 {
        gap:1.25rem
    }

    .sm\:px-4 {
        padding-left: 1rem;
        padding-right:1rem
    }

    .sm\:py-8 {
        padding-top: 2rem;
        padding-bottom:2rem
    }

    .sm\:text-\[3em\] {
        font-size:3em
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .md\:m-l-0 {
        margin-left:0
    }

    .md\:ml-\[20px\] {
        margin-left:20px
    }

    .md\:inline {
        display:inline
    }

    .md\:hidden {
        display:none
    }

    .md\:h-160px {
        height:160px
    }

    .md\:min-h-\[300px\] {
        min-height:300px
    }

    .md\:w-150px {
        width:150px
    }

    .md\:w-80\% {
        width:80%
    }

    .md\:flex {
        display:flex
    }

    .md\:flex-1 {
        flex:1 1 0%
    }

    .md\:flex-row {
        flex-direction:row
    }

    .md\:flex-col {
        flex-direction:column
    }

    .md\:items-start {
        align-items:flex-start
    }

    .md\:justify-start {
        justify-content:flex-start
    }

    .md\:gap-0 {
        gap:0
    }

    .md\:gap-1 {
        gap:.25rem
    }

    .md\:gap-3 {
        gap:.75rem
    }

    .md\:px-10 {
        padding-left: 2.5rem;
        padding-right:2.5rem
    }

    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right:1.5rem
    }

    .md\:py-12 {
        padding-top: 3rem;
        padding-bottom:3rem
    }

    .md\:text-left {
        text-align:left
    }

    .md\:text-\[3\.5em\] {
        font-size:3.5em
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-4 {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }

    .lg\:inline {
        display:inline
    }

    .lg\:min-h-\[350px\] {
        min-height:350px
    }

    .lg\:w-70\% {
        width:70%
    }

    .lg\:w-auto {
        width:auto
    }

    .lg\:flex {
        display:flex
    }

    .lg\:flex-row {
        flex-direction:row
    }

    .lg\:items-center {
        align-items:center
    }

    .lg\:justify-between {
        justify-content:space-between
    }

    .lg\:gap-5 {
        gap:1.25rem
    }

    .lg\:text-\[4em\] {
        font-size:4em
    }
}