.contacts-section{
    @apply bg-yellow-100 py-sm xl:py-base mt-base xl:mt-lg;
    .block-title{
        &__inner{
            a{
                @apply text-yellow-300;
            }
        }
    }
    &-cards-row{
        @apply grid-container spacing-base;
        &__inner{
            @apply grid gap-[calc(var(--grid-gutter)*2)] grid-cols-1 md:grid-cols-2 xl:grid-cols-4;
            &-squares{
                @apply max-xl:lg:grid-cols-3;
            }
        }
        > p{
            @apply font-bold mb-4;
        }
    }
    &-card{
        @apply bg-black text-yellow-100 p-[calc(var(--grid-gutter)*2)] xl:grid items-start grid-cols-2;
        p{
            @apply text-yellow-100;
        }
        a{
            @apply underline;
        }
        header{
            @apply mb-base xl:mb-0;
            p{
                @apply text-size-md-lg mb-0;
                &:last-child:not(:first-child){
                    @apply text-size-base;
                }
            }
        }
        > div{
            @apply xl:aspect-square;
            &:first-child{
                @apply flex flex-col xl:h-full;
                header{
                    @apply grow;
                }
                &:last-child{
                    grid-column: span 2;
                }
            }
        }
        &:not(.contacts-section-card--span){
            > div{
                @apply aspect-square;
            }
        }
        &--span{
            @apply self-start;
            @screen xl{
                align-self: inherit;
            }
            @screen xl{
                grid-column: span 2;
            }
            footer{
                @apply mb-base xl:mb-0;
            }    
        }
    }
    + .site-footer{
        @apply mt-0 !important;
    }
    &--noMargin{
        @apply mt-0;
    }
}