body {
    background-color: #00973F;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
	}

	70% {
		transform: scale(1);
	}

	100% {
		transform: scale(0.95);
	}
}

.poster-wrapper {
    padding: 3em;
}

.the {
    max-width: 600px;
    margin: 0 auto;
}

.landscape {
    display: grid;
    max-width: 1000px;
    grid-template-columns: repeat(5, auto);
    grid-template-rows: repeat(6, auto);
    column-gap: .5em;
    row-gap: .5em;
    margin: 0 auto;
}

img {
    width: 100%;
    animation: pulse 3s infinite ease-in-out;
}

.landscape__l {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}

.landscape__a {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.landscape__n {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

.landscape__d {
    grid-column: 3 / 6;
    grid-row: 3 / 5;
}

.landscape__s {
    grid-column: 1 / 2;
    grid-row: 4 / 7;
}

.landscape__c {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

.landscape__a2 {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
}

.landscape__p {
    grid-column: 2 / 4;
    grid-row: 6 / 8;
}

.landscape__e {
    grid-column: 4 / 6;
    grid-row: 5 / 7;
}

.details {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
}

.lecture {
    margin-bottom: 1em;
    text-align: center;
}

.lecture p {
    font-family: 'Arial', sans-serif;
    color: white;
}

.date {
    margin-top: 1em;
    text-align: center;
}

.date p {
    font-family: 'Arial', sans-serif;
    color: white;
}

.squares {
    display: grid;
    max-width: 1000px;
    grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(6, auto);
    column-gap: .5em;
    row-gap: .5em;
    margin: 0 auto;
}

.of {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.squares__s {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
}

.squares__q {
    grid-column: 1 / 4;
    grid-row: 3 / 8;
}

.squares__u {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

.squares__a {
    grid-column: 5 / 7;
    grid-row: 3 / 4;
}

.squares__r {
    grid-column: 4 / 6;
    grid-row: 4 / 6;
}

.squares__e {
    grid-column: 4 / 5;
    grid-row: 6 / 7;
}

.squares__s2 {
    grid-column: 5 / 7;
    grid-row: 6 / 7;
}

@media (min-width: 30em) {
    .the {
        margin-bottom: 0.5em;
    }

    .landscape {
        display: grid;
        grid-template-columns: repeat(8, auto);
        grid-template-rows: repeat(5, auto);
        column-gap: .5em;
        row-gap: .5em;
    }
    
    .landscape__l {
        grid-column: 1 / 4;
        grid-row: 1 / 5;
    }
    
    .landscape__a {
        grid-column: 4 / 5;
        grid-row: 2 / 3;
    }
    
    .landscape__n {
        grid-column: 5 / 6;
        grid-row: 3 / 5;
    }
    
    .landscape__d {
        grid-column: 6 / 8;
        grid-row: 2 / 5;
    }
    
    .landscape__s {
        grid-column: 1 / 2;
        grid-row: 5 / 7;
    }
    
    .landscape__c {
        grid-column: 2 / 4;
        grid-row: 5 / 7;
    }
    
    .landscape__a2 {
        grid-column: 4 / 5;
        grid-row: 4 / 6;
    }
    
    .landscape__p {
        grid-column: 5 / 6;
        grid-row: 5 / 6;
    }
    
    .landscape__e {
        grid-column: 6 / 8;
        grid-row: 5 / 7;
    }
 
    .squares {
        display: grid;
        max-width: 1000px;
        grid-template-columns: repeat(6, auto);
        grid-template-rows: repeat(8, auto);
        column-gap: .5em;
        row-gap: .5em;
    }

    .of {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .squares__s {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .squares__q {
        grid-column: 2 / 4;
        grid-row: 1 / 6;
    }

    .squares__u {
        grid-column: 4 / 5;
        grid-row: 2 / 3;
    }

    .squares__a {
        grid-column: 5 / 6;
        grid-row: 2 / 3;
    }

    .squares__r {
        grid-column: 5 / 7;
        grid-row: 3 / 4;
    }

    .squares__e {
        grid-column: 4 / 7;
        grid-row: 4 / 6;
    }

    .squares__s2 {
        grid-column: 6 / 7;
        grid-row: 6 / 7;
    }
}

@media (min-width: 45em) {
    .the {
        margin-left: 0;
    }
    
    .landscape {
        display: grid;
        grid-template-columns: repeat(7, auto);
        grid-template-rows: repeat(6, auto);
        column-gap: .5em;
        row-gap: .5em;
    }
    
    img {
        width: 100%;
    }
    
    .landscape__l {
        grid-column: 1 / 4;
        grid-row: 1 / 4;
    }
    
    .landscape__a {
        grid-column: 4 / 6;
        grid-row: 2 / 4;
    }
    
    .landscape__n {
        grid-column: 6 / 7;
        grid-row: 2 / 3;
    }
    
    .landscape__d {
        grid-column: 6 / 8;
        grid-row: 3 / 5;
    }
    
    .landscape__s {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }
    
    .landscape__c {
        grid-column: 2 / 4;
        grid-row: 4 / 7;
    }
    
    .landscape__a2 {
        grid-column: 4 / 5;
        grid-row: 5 / 6;
    }
    
    .landscape__p {
        grid-column: 5 / 7;
        grid-row: 5 / 7;
    }
    
    .landscape__e {
        grid-column: 7 / 8;
        grid-row: 6 / 7;
    }

    .details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    .lecture, .date {
        margin: auto;
    }
 
    .squares {
        display: grid;
        max-width: 1000px;
        grid-template-columns: repeat(6, auto);
        grid-template-rows: repeat(8, auto);
        column-gap: .5em;
        row-gap: .5em;
    }

    .of {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .squares__s {
        grid-column: 2 / 4;
        grid-row: 1 / 2;
    }

    .squares__q {
        grid-column: 2 / 4;
        grid-row: 2 / 8;
    }

    .squares__u {
        grid-column: 4 / 6;
        grid-row: 2 / 4;
    }

    .squares__a {
        grid-column: 6 / 7;
        grid-row: 3 / 4;
    }

    .squares__r {
        grid-column: 4 / 5;
        grid-row: 4 / 5;
    }

    .squares__e {
        grid-column: 5 / 7;
        grid-row: 4 / 6;
    }

    .squares__s2 {
        grid-column: 7 / 8;
        grid-row: 5 / 6;
    }

}

@media (min-width: 60em) {
    .landscape {
        display: grid;
        max-width: 1000px;
        grid-template-columns: repeat(17, auto);
        grid-template-rows: repeat(4, auto);
        column-gap: 1em;
        row-gap: 1em;
        margin-top: 1em;
    }

    .the {
        max-width: 500px;
        margin: 0 auto;
    }

    .landscape__l {
        grid-column: 1 / 5;
        grid-row: 1 / 5;
    }

    .landscape__a {
        grid-column: 5 / 7;
        grid-row: 1 / 3;
    }

    .landscape__n {
        grid-column: 7 / 9;
        grid-row: 1 / 3;
    }

    .landscape__d {
        grid-column: 5 / 9;
        grid-row: 3 / 5;
    }

    .landscape__s {
        grid-column: 9 / 11;
        grid-row: 3 / 5;
    }

    .landscape__c {
        grid-column: 11 / 13;
        grid-row: 3 / 5;
    }

    .landscape__a2 {
        grid-column: 13 / 14;
        grid-row: 3 / 4;
    }

    .landscape__p {
        grid-column: 13 / 15;
        grid-row: 4 / 5;
    }

    .landscape__e {
        grid-column: 15 / 18;
        grid-row: 3 / 5;
    }

    .details {
        max-width: 1000px;
    }

    .squares {
        display: grid;
        max-width: 1000px;
        grid-template-columns: repeat(6, auto);
        grid-template-rows: repeat(6, auto);
        column-gap: 1em;
        row-gap: 1em;
    }

    .of {
        grid-column: 1 / 3;
        grid-row: 1 / 4;
    }

    .squares__s {
        grid-column: 3 / 6;
        grid-row: 2 / 4;
    }

    .squares__q {
        grid-column: 6 / 9;
        grid-row: 2 / 7;
    }

    .squares__u {
        grid-column: 9 / 10;
        grid-row: 2 / 3;
    }

    .squares__a {

        grid-column: 9 / 10;
        grid-row: 3 / 4;
    }

    .squares__r {

        grid-column: 10 / 12;
        grid-row: 2 / 4;
    }

    .squares__e {

        grid-column: 10 / 12;
        grid-row: 4 / 6;
    }

    .squares__s2 {
        grid-column: 12 / 13;
        grid-row: 4 / 5;
    }
}