.hvr-bounce-in.a {
    grid-area: a / a / a / a;
}

.hvr-bounce-in.c {
    grid-area: c / c / c / c;
}

.hvr-bounce-in.d {
    grid-area: d / d / d / d;
}

.hvr-bounce-in.e {
    grid-area: e / e / e / e;
}

.hvr-bounce-in.f {
    grid-area: f / f / f / f;
}

.hvr-bounce-in.g {
    grid-area: g / g / g / g;
}

.hvr-bounce-in.h {
    grid-area: h / h / h / h;
}

.hvr-bounce-in.i {
    grid-area: i / i / i / i;
}

.hvr-bounce-in.j {
    grid-area: j / j / j / j;
}

@media (min-width: 1890px) {
    section.first {
        width: 1890px;
        grid-template-areas:
            '. . a a a . . . . . . . . e e e .'
            '. . a a a b b . . . . d d e e e .'
            '. . a a a b b . c c . d d e e e .'
            '. f f . . . . . c c . . . . . . .'
            '. f f . g g g h h . . . . . j j .'
            '. . . . g g g h h . . . i i j j .'
            '. . . . g g g . . . . . i i . . .'
        ;
    }
}

@media screen and (min-width: 1180px) and (max-width: 1889px) {
    section.first {
        width: 98%;
        grid-template-areas:
            '. a a a . . . . .  . . e e e '
            '. a a a b b . . .  d d e e e '
            '. a a a b b . c c  d d e e e '
            'f f . . . . . c c  . . . . . '
            'f f . g g g h h .  . . . j j '
            '. . . g g g h h .  . i i j j '
            '. . . g g g . . .  . i i . . '
        ;
    }
}

@media screen and (min-width: 768px) and (max-width: 1179px) {
    section.first {
        width: 98%;
        grid-template-areas:
            '. . . . . . d d . .'
            '. a a b b . d d e e'
            '. a a b b c c . e e'
            'f f . . . c c j j .'
            'f f g g g h h j j .'
            '. . g g g h h i i .'
            '. . g g g . . i i .'
        ;
    }
}

@media screen and (min-width: 550px) and (max-width: 768px) {
    section.first {
        width: 98%;
        grid-template-areas:
            'a a . . d d'
            'a a . . d d'
            '. b b c c .'
            '. b b c c .'
            'f f f e e .'
            'f f f e e .'
            'f f f . . .'
            '. . . g g g'
            'h h . g g g'
            'h h . g g g'
            '. i i . j j'
            '. i i . j j'
        ;
    }
}

@media screen and (max-width: 549px) {
    section.first {
        width: 98%;
        grid-template-areas:
            'a a . . .'
            'a a . . .'
            '. b b c c'
            '. b b c c'
            'f f f e e'
            'f f f e e'
            'f f f h h'
            'd d . h h'
            'd d . . .'
            '. . . g g'
            '. i i g g'
            '. i i j j'
            '. . . j j'
        ;
    }
}