.info {
    border-radius: 2rem;
    background-image: var(--dark-to-black-linear-gradient);
    padding: calc(var(--padding)/2);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem 0;

    & > * {
        margin: 0;
        color: var(--gold-1);
    }

    & > img {
        width: 64px;
        align-self: center;
    }
}

main {
    & h2, h3 {
        margin: 0;
    }
}


/***********************/
/*Tablet CSS*/
/***********************/

@media screen and (min-width:480px) {
    .side-to-side {
        & > div {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 0 2rem;

            & > h3 {
                font-size: 1.5rem;
                align-self: end;
            }
        }

        & > div:nth-child(odd) {
            & > img {
                grid-column: 1;
                grid-row: 1 / 3;
            }

            & > h3 {
                grid-column: 2 / 4;
                grid-row: 1;
            }

            & > p {
                grid-column: 2 / 4;
                grid-row: 2;
            }
        }

        & > div:nth-child(even) {
            & > img {
                grid-column: 3;
                grid-row: 1 / 3;
            }

            & > h3 {
                grid-column: 1 / 3;
                grid-row: 1;
            }

            & > p {
                grid-column: 1 / 3;
                grid-row: 2;
            }
        }
    }
}


/***********************/
/*Desktop CSS*/
/***********************/

@media screen and (min-width:960px) {

    header > div {
        padding: 3rem 0;

        & > hgroup > p {
            font-size: larger;
        }
    }

    header a:has(img) {
        display: grid !important;
        width: 560px;
        border-radius: 3rem;

        & > img {
            grid-column: 1;
            grid-row: 1 / 3;
            max-width: 100% !important;
        }

        & > h3 {
            grid-column: 2;
            grid-row: 1;
        }

        & > p {
            grid-column: 2;
            grid-row: 2;            
        }

        & > h3, p {
            text-align: left;
            margin: auto var(--margin);
        }

        
    } 
}