/* ==================================================
   YUME – SOCIAL / INSTAGRAM
   ================================================== */

.yume-social {
    width: 100%;

    padding: 70px 0 0;

    background: var(--yume-white);
    color: var(--yume-text);

    text-align: center;
}

.yume-social__inner {
    width: 100%;
}


/* ==================================================
   NADPIS
   Typografii řeší base.css
   ================================================== */

.yume-social__title {
    margin: 0 0 24px;

    color: var(--yume-text);

    text-transform: none !important;
}


/* ==================================================
   SOCIÁLNÍ IKONY
   ================================================== */

.yume-social__icons {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-bottom: 42px;
}

.yume-social__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: var(--yume-hot-pink);

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.yume-social__icon:hover {
    transform: translateY(-2px);

    opacity: 0.8;
}

.yume-social__icon svg {
    width: 24px;
    height: 24px;

    fill: currentColor;
}


/* ==================================================
   OBRÁZKOVÝ GRID
   ================================================== */

.yume-social__grid {
    display: grid;

    grid-template-columns: repeat(8, 1fr);

    width: 100%;
}

.yume-social__item {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: var(--yume-light-gray);
}

.yume-social__item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}

.yume-social__item:hover img {
    transform: scale(1.05);
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 991px) {

    .yume-social__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ==================================================
   MOBIL
   ================================================== */

@media (max-width: 767px) {

    .yume-social {
        padding-top: 55px;
    }

    .yume-social__icons {
        margin-bottom: 32px;
    }

    .yume-social__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}