style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    font-family: sans-serif;
    font-size: 62.5%;
}

header {
    padding: 2rem;
    text-align: center;

}
header h1, .content h2 {
    font-size: clamp(4rem, 4rem + 1vw, 6rem);
    text-align: center;
}
header p {
    min-width: 474px;
    
}
header p, section p {
    font-size: clamp(1.6rem, 1.6rem + 1vw, 2rem);
    text-align: center;
}

main {
    padding: 2rem;
}
.content {
    max-width: 650px;
    margin: 0 auto 5rem;
    border: 1px solid;
    padding: 1rem;
    text-align: center;

}
span {
    font-family: monospace;
    font-size: clamp(1.2rem, 1.2rem + 1vw, 1.5rem);
    color: rgb(172, 172, 172);

    margin: 0 auto;
}

@media (max-width: 582px) {
    .content {
        border: none;
    }
}
@media (min-width: 1440px) {
    .gallery {
        display: grid;
        justify-content: center;
        gap: 3REM;
        grid-template-areas: "A B"
        "C B";
    }
    .gallery a:nth-child(1){
        grid-area: A;
    }
    .gallery a:nth-child(2){
        grid-area: B;
    }
    .gallery a:nth-child(3){
        grid-area: C;
    }
    .gallery a {
        width: 30.3rem;
    }
    .gallery img {
        border-radius: 3rem;
        width: 100%;
        -o-object-fit: cover;
        object-position: center;
    }
}