Unit staff cards

Блок-Карты персонала

by acid test

HTML

<section class="team">
    <h2>The Team</h2>
    <div class="card">
        <img src="https://kubuntu.ru/files/pictures/picture-18447.jpg" alt="Name Surname" class="thumbnail">
        <div class="caption">
            <h3>Name Surname</h3>
            <span>Function</span>
        </div>
    </div>
    <div class="card">
        <img src="https://kubuntu.ru/files/pictures/picture-18447.jpg" alt="Name Surname" class="thumbnail">
        <div class="caption">
            <h3>Name Surname</h3>
            <span>Function</span>
        </div>
    </div>
    <div class="card">
        <img src="https://kubuntu.ru/files/pictures/picture-18447.jpg" alt="Name Surname" class="thumbnail">
        <div class="caption">
            <h3>Name Surname</h3>
            <span>Function</span>
        </div>
    </div>
    <div class="card">
        <img src="https://kubuntu.ru/files/pictures/picture-18447.jpg" alt="Name Surname" class="thumbnail">
        <div class="caption">
            <h3>Name Surname</h3>
            <span>Function</span>
        </div>
    </div>
    <div class="card">
        <img src="https://kubuntu.ru/files/pictures/picture-18447.jpg" alt="Name Surname" class="thumbnail">
        <div class="caption">
            <h3>Name Surname</h3>
            <span>Function</span>
        </div>
    </div>
    <div class="card">
        <img src="https://kubuntu.ru/files/pictures/picture-18447.jpg" alt="Name Surname" class="thumbnail">
        <div class="caption">
            <h3>Name Surname</h3>
            <span>Function</span>
        </div>
    </div>
</section>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    padding: 1em;
}

.team {
    min-width: 200px;
    padding: 20px 20px 50px;
    text-align: center;
    background: #eee;
}

.team h2 {
    color: #346f5f;
    font-size: 30px;
    line-height: 0.8;
}

.team .card {
    width: 140px;
    padding-bottom: 5px;
}

.card .thumbnail {
    margin-bottom: 3px;
    overflow: hidden;
    width: 80px;
    height: 80px;
    border-radius: 100px;
}

.card .caption {
    line-height: 0.7;
}

.caption h3 {
    color: #3e7d6f;
    font-size: 12px;
}

.caption span {
    font-size: 10px;
    font-style: italic;
}

.team {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 35px;
    place-content: center;
}

.team>* {
    grid-column: 1/4;
}

@media only screen and (min-width: 360px) {
    .team h2:first-child {
        grid-column: 1/4;
    }
    .team .card:nth-of-type(odd) {
        grid-column: 1/2;
    }
    .team .card:nth-of-type(even) {
        grid-column: 2/4;
    }
}

@media only screen and (min-width: 530px) {
    .team h2:first-child {
        grid-column: 1/4;
    }
    .team .card:nth-of-type(3n+1) {
        grid-column: 1;
    }
    .team .card:nth-of-type(3n+2) {
        grid-column: 2;
    }
    .team .card:nth-of-type(3n+3) {
        grid-column: 3;
    }
}