/* Image Grid Layout */
@import url('https://fonts.cdnfonts.com/css/convergence');

:root {
    --primary-color-soft: #FFDF82;
    --primary-color: #FFBF00;
    --primary-color-bold: #755800;

    --secondary-color-soft: #B8D4FF;
    --secondary-color: #0066FF;
    --secondary-color-bold: #002F75;

    --accent-color-soft: #FFB8D7;
    --accent-color: #FF006F;
    --accent-color-bold: #750033;

    --font-1: 'Convergence', sans-serif;
    --border-rad: 15px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    min-height: 100vh;
    background-color: var(--secondary-color-soft);
}
h1 {
    font-family: var(--font-1);
    background-color: var(--primary-color-soft);
    width: fit-content;
    padding: 10px;
    margin: 5px auto;
    border-radius: var(--border-rad);
    border: 2px solid var(--primary-color-bold);
    color: var(--secondary-color-bold);
}
#grid-container {
    min-width: 0;
    max-width: 95vw;
    margin: 10px auto;
    overflow: hidden;
    background-color: var(--primary-color-soft);
    padding: 5px;
    border-radius: var(--border-rad);

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.image {
    grid-column: 1 / 4;
    border-radius: var(--border-rad);
    object-fit: cover;
    width: 100%;
    border: 2px solid var(--primary-color-bold);
}
.ref-cta {
    display: block;
    text-decoration: none;
    color: var(--accent-color-bold);
    background: linear-gradient(
        45deg,
        var(--primary-color-soft),
        var(--primary-color)
    );
    border-radius: var(--border-rad); text-align: center;
    width: 230px;
    padding: 15px;
    margin: 15px auto;
    border: 2px solid var(--accent-color-bold);

    box-shadow: 5px 5px 10px hsl(0, 0%, 12%),
                5px 5px 25px hsl(0, 0%, 12%);
}
.ref-cta:active {
    transform: translate(5px, 5px);
}


/* Tablet --- Styles */
@media only screen and (min-width: 786px){
    #grid-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        min-width: 0;
        max-width: 85vw;
        gap: 5px;
        border: 2px solid var(--primary-color-bold);
    }
    .image {
        width: 100%;
        height: 100%;

        /* Allow the images to shrink inside their grid areas */
        min-width: 0;
        min-height: 0;

        
    }
    #img-1{
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    #img-2{
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    #img-3{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    #img-4{
        grid-column: 2 / 3;
        grid-row: 2 / 4;
    }
    #img-5{
        grid-column: 3 / 4;
        grid-row: 1 / 3;
    }
    #img-6{
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }
}
/* Average --- Desktop --- Styles */
@media only screen and (min-width: 1050px){
    #grid-container {
        max-width: 55vw;
        min-height: 0;
        height: 75vh;
        max-height: 75vh;
    }
}
/* Large --- Desktop --- Styles */
@media only screen and (min-width: 1450px){
    
}