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

:root {
    --clr-bg: #374d70;
    --clr-text: #fff;
    --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");
}

#galeryTitle{
    padding:20px;
}
#galeryContainer {
    min-width: 100%;
    height: 400px;
    overflow: hidden;
    display: flex;
    place-content: center;
    gap: 1rem;
    padding:20px;
}

@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 > #galeryIcon {
    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: url(../galeri1.jpg);
}

.element:nth-child(2) {
    background-image: url(../galeri2.jpg);
}

.element:nth-child(3) {
    background-image: url(../galeri3.jpg);
}

.element:nth-child(4) {
    background-image: url(../galeri4.jpg);
}