@import url(https://fonts.googleapis.com/css?family=Roboto);

:root {
    --clr-bg: #374d70;
    --clr-text: #fff;
    --bg-img-1: url("https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg");
    --bg-img-2: url("https://64.media.tumblr.com/a494b67753b8e0320c9f0860151fb17b/dd0d5f5d2c6b0f0b-14/s2048x3072/7e65ea5366f444d551536b61d9f20816ce200afd.jpg");
    --bg-img-3: url("https://media.photographycourse.net/wp-content/uploads/2022/04/08160619/death_valley_dunes_landscape_photography_1.jpg");
    --bg-img-4: url("https://cdn.theatlantic.com/media/img/photo/2020/11/top-shots-2020-international-landsc/a01_Yuen_MagicalNight-1/original.jpg");
    --bg-img-5: url("https://cdn.hovia.com/app/uploads/new-york-landscape-plain.jpg");
    --bg-img-6: url("https://images.hindustantimes.com/img/2021/04/10/1600x900/ant-rozetsky-q-DJ9XhKkhA-unsplash_1618061653998_1618061665535.jpg");
}

html,
body {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
}

body {
    width: 100dvw;
    height: 100dvh;
    background: var(--clr-bg);
    display: grid;
    place-content: center;
}

.container {
    width: 100dvw;
    height: 100dvh;
    max-height: 500px;
    overflow: hidden;
    display: flex;
    place-content: center;
    gap: 1rem;
}

@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
        max-height: none;
        max-width: 500px;
    }
}

.element {
    cursor: pointer;
    flex: 0 1 auto;
    overflow: hidden;
    max-width: 40px;
    border-radius: 4rem;
    padding: 0.5rem;
    background-size: auto 130%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    transition: 0.5s ease-in-out;
}

@media screen and (max-width: 768px) {
    .element {
        flex-direction: column;
        align-items: flex-start;
        max-width: none;
        max-height: 60px;
        background-size: 130% auto;
    }
}

.element:focus {
    outline: none;
    transform: scale(1);
    flex-grow: 1000;
    max-width: 600px;
    border-radius: 1.75rem;
    background-size: auto 100%;
}

@media screen and (max-width: 768px) {
    .element:focus {
        flex-direction: column;
        align-items: flex-start;
        max-width: none;
        max-height: 600px;
        background-size: 130% auto;
    }
}

.element>.icon {
    width: 24px;
    aspect-ratio: 1/1;
    background-color: #fff;
    padding: 8px;
    border-radius: 50%;
    place-content: center;
    display: grid;
    border: 4px solid rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
}

.element:nth-child(1) {
    background-image: var(--bg-img-1);
}

.element:nth-child(2) {
    background-image: var(--bg-img-2);
}

.element:nth-child(3) {
    background-image: var(--bg-img-3);
}

.element:nth-child(4) {
    background-image: var(--bg-img-4);
}

.element:nth-child(5) {
    background-image: var(--bg-img-5);
}

.element:nth-child(6) {
    background-image: var(--bg-img-6);
}