#infographics {
    padding: 1em 0;
}

.infographic-section,
.infographic-section-small {
    display: grid;
    grid-gap: 1.3em;
}

.infographic-section > div:nth-of-type(1) {
    grid-area: first;
}
.infographic-section > div:nth-of-type(2) {
    grid-area: second;
}
.infographic-section > div:nth-of-type(3) {
    grid-area: third;
}
.infographic-section > div:nth-of-type(4) {
    grid-area: fourth;
}
.infographic-section > div:nth-of-type(5) {
    grid-area: fifth;
}
.infographic-section > div:nth-of-type(6) {
    grid-area: sixth;
}

.infographic-section {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "first"
        "second"
        "third"
        "fourth"
        "fifth"
        "sixth"
}
.infographic-section-small {
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr;
}

.infographic-section-small {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}


.infographic {
    box-sizing: border-box;
    color: #FFFFFF;
}
.infographic a {
    color: #FFFFFF;
    text-decoration: none;
    line-height: 0;
}
.infographic.large {
    position: relative;
}
.infographic.large img {
    width: 100%;
}
.infographic-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2em;
}
.infographic-content h4 {
    font-size: 2em;
    line-height: 1.2;
}
.infographic-content p {
    font-size: 1.2em;
}

.infographic.small {
    background: #79000D;
    text-align: center; 
    position: relative;
    display: block;
    width: 100%;
    padding-top: 100%;
}
.infographic-content-small {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    line-height: 1.5;
    padding: 1em;
}
.infographic.small:nth-of-type(even) {
    background: #003865;
}
.infographic.small h2 {
    font-size: 2.6em;
    line-height: 1.2;
}


@media only screen and ( min-width: 768px ) {
    
    .infographic-section {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "first first second"
            "fourth fifth fifth" 
            "third third third"
            "sixth sixth sixth"
    }
    .infographic-section-small {
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr;
    }
    
    .infographic-section > div:nth-of-type(3),
    .infographic-section > div:nth-of-type(6) {
        display: none;
    }
}
    
@media only screen and ( min-width: 1120px ) {
    
    .infographic-section {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "first first second third third"
            "fourth fifth fifth sixth sixth"
    }
    
    .infographic-section > div:nth-of-type(3),
    .infographic-section > div:nth-of-type(6) {
        display: block;
    }
}