@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

@media (min-width: 576px) {

    .container-sm,
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {

    .container-md,
    .container-sm,
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {

    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {

    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1320px;
    }
}

@media (min-width: 1200px) {

    h1,
    .h1 {
        font-size: 2.5rem;
    }

    h3,
    .h3 {
        font-size: 1.75rem;
    }

    h4,
    .h4 {
        font-size: 1.5rem;
    }

    legend {
        font-size: 1.5rem;
    }

    h2,
    .h2 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .title {
        font-size: 3rem;
    }

    .masthead__logo img {
        max-width: 30rem;
    }

    .content-section {
        height: auto;
    }

    .masthead__logo img {
        max-width: 30rem;
    }

    #div-edit {
        padding: 5rem 0;
    }

    .portfolio-item {
        border-radius: 33px;
    }
}

@media screen and (max-width: 425px) {
    #h-1 {
        font-size: 2rem;
    }

    .portfolio-item {
        border-radius: 20px;
    }
}