/* Основные стили проекта. Это стили для темы, которую вы верстаете первой. */

.page {
    background-image: var(--page-background-image);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    display: grid;
    grid-template-columns: 1fr;
    min-block-size: 100dvb;
    background-color: var(--page-background-color, #fff1f7);
    padding: 0 10px;
}

.header {
    height: 100dvb;
    min-height: 668px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, min-content);
    padding: 10px 0;
}

.header__theme-menu {
    justify-self: end;
    margin-top: 3.988rem;
}

.header__theme-menu-list {
    display: flex;
    flex-direction: column;
    gap: 0.725rem;
}

.header__theme-menu-button {
    text-transform: lowercase;
    font-size: var(--text-font-size, 1.125rem);
    background: transparent;
    padding: 0.094rem 0.813rem;
    line-height: 100%;
    color: var(--content-title-color);
    border: 1px solid transparent;
    transition: border 0.2s linear;
}

.header__theme-menu-button:hover:not(:disabled) {
    border: 1px solid var(--button-border-color);
}

.header__theme-menu-button:focus-visible {
    outline: none;
    border-bottom: 1px solid currentColor;
}

.header__theme-menu-button_active {
    border: 1px solid currentColor;
}

.header__title {
    margin-top: 4.363rem;
}

.header__description {
    margin-top: 3.438rem;
}

.content {
    display: grid;
    grid-template-columns: 1fr;
}

.content__title {
    font-size: var(--text-font-size);
    color: var(--content-title-color);
}

.content__subtitle {
    margin-block-end: 10px;
}

.section-topic__item p {
    margin-top: 10px;
}

.decorated-zone {
    position: relative;
}

.decorated-zone::before,
.decorated-zone::after {
    content: "";
    display: block;
    width: 1.563rem;
    aspect-ratio: 1;
    position: absolute;
}

.decorated-zone::before {
    border-top: 1px solid var(--content-title-color);
    border-right: 1px solid var(--content-title-color);
    right: 0;
    top: 10px;
}

.decorated-zone::after {
    border-left: 1px solid var(--content-title-color);
    border-bottom: 1px solid var(--content-title-color);
    left: 0;
    bottom: 10px;
}

.decorated_text {
    line-height: 83%;
    font-weight: var(--bold-weight, 700);
    font-size: var(
            --title-font-size-mobile,
            clamp(7.25rem, 7.0115rem + 1.0178vw, 7.5rem)
    );
    text-shadow: 4px 4px 0 var(--accent-color, #ff8dcbff);
    color: var(--secondary-color, #ffc2e6ff);
}

.title-decor {
    font-size: var(--text-font-size, 1.125rem);
    line-height: 1.3;
    font-weight: var(--bold-weight, 700);
    background-color: var(--accent-color, #ff8dcbff);
    color: var(--text-title-decor-color);
}

.text-link {
    text-shadow: 2px 2px 0 var(--accent-color, #ff8dcbff);
    text-decoration: none;
}

.text-link:hover {
    border-bottom: 1px solid currentColor;
}

.text-link:focus-visible {
    outline: 1px solid currentColor;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(
    var(--column-count, 1),
    var(--column-size, 1fr)
  );
}

.grid-item {
    grid-column: var(--item-column-start, auto) / var(--item-column-end, auto);
    grid-row: var(--item-row-start, auto) / var(--item-row-end, auto);
}

.section-topic {
    margin-block-end: 50px;
    gap: 20px;
    container-type: inline-size; /* включаем контейнер-запросы */
    --column-count: 1;
    grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
}

.section-topic--stress {
    margin-block-start: 2.5rem;
}

.section-topic--advice .content__subtitle {
    margin-block-end: 20px;
}

.section-topic--advice .content__subtitle--regular {
    margin-block-end: 10px;
}

.image-grid-container {
    gap: 0.625rem;
}

.section-topic--images {
    gap: 0;
    margin-block-end: 40px;
}

.content__subtitle--regular {
    font-weight: 400;
}

.footer {
    height: 100dvb;
    min-height: 668px;
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px 0;
}

.footer__text {
    place-self: center;
}

.image-grid {
    inline-size: 100%;
    block-size: 100%;
    max-block-size: 100%;
    object-fit: cover;
    object-position: center;
    max-width: 100%;
}

.rec-icon {
    color: var(--accent-color, #ff0070);
    line-height: 1.38;
    letter-spacing: 0;
    font-size: var(--text-font-size, 1.125rem);
    position: absolute;
    top: 12px;
    right: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.rec-icon::after {
    content: "";
    color: var(--accent-color, #ff0070);
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background: var(--accent-color, #ff0070);
    box-shadow: 0 0 4px 2px currentColor;
}

@media screen and (width >= 768px) {
    .page {
        padding: 0 20px;
    }

    .decorated_text {
        font-size: var(
                --title-font-size-desktop,
                clamp(7.5rem, 0.5625rem + 14.4531vw, 9.8125rem)
        );
    }

    .decorated-zone::before {
        top: 20px;
    }

    .decorated-zone::after {
        bottom: 20px;
    }

    .section-topic {
        margin-block-end: 80px;
    }

    .header {
        min-height: 1024px;
        grid-template-columns: 1fr 1fr;
        padding: 20px 0;
    }

    .header__theme-menu {
        grid-column: 2;
        margin-top: 10.8rem;
    }

    .header__title {
        grid-column: 1 / -1;
        margin-top: 11.113rem;
        margin-left: -20px;
    }

    .header__description {
        grid-column: 2;
        margin-top: 10.125rem;
    }

    .section-topic {
        grid-template-columns: minmax(236px, 1fr) repeat(2, 1fr);
    }

    .section-topic--stress {
        margin-block-start: 3.55rem;
    }

    .section-topic--stress .section-topic__item {
        --item-column-start: 2;
        --item-column-end: -1;
    }

    .section-topic--distractions .section-topic__item {
        --item-column-start: 1;
        --item-column-end: -1;
    }

    .section-topic--advice > .content__subtitle {
        --item-column-start: 2;
        --item-column-end: -1;
    }

    .section-topic--advice .section-topic__item {
        --item-column-start: 2;
        --item-column-end: -1;
    }

    .section-topic--images .content__subtitle {
        --item-column-start: 1;
        --item-column-end: -1;
        margin-bottom: 20px;
    }

    .image-grid-container {
        --item-column-start: 1;
        --item-column-end: -1;
        --column-count: 3;
        gap: 20px;
    }

    .image-grid-sunset {
        --item-column-start: 1;
        --item-column-end: 3;
        --item-row-start: 1;
        --item-row-end: 1;
    }

    .image-grid-ice_cream {
        --item-column-start: 3;
        --item-column-end: -1;
        --item-row-start: 1;
        --item-row-end: 3;
    }

    .image-grid-tape {
        --item-column-start: 1;
        --item-column-end: 1;
        --item-row-start: 2;
        --item-row-end: 4;
    }

    .image-grid-books {
        --item-column-start: 2;
        --item-column-end: 2;
        --item-row-start: 2;
        --item-row-end: 2;
    }

    .image-grid-street {
        --item-column-start: 2;
        --item-column-end: -1;
        --item-row-start: 3;
        --item-row-end: 3;
    }

    .footer {
        min-height: 1024px;
    }

    .section-topic--images {
        margin-block-end: 60px;
    }

    .rec-icon {
        top: 20px;
        right: 10px;
    }
}

@media screen and (width >= 1024px) {
    .header {
        min-height: 768px;
    }

    .header__theme-menu {
        justify-self: center;
        margin-top: 0;
        grid-column: 1 / -1;
    }

    .header__theme-menu-list {
        flex-direction: row;
    }

    .section-topic--stress {
        margin-block-start: 3.75rem;
    }

    .header__title {
        margin-top: 17.263rem;
    }

    .header__description {
        margin-top: 7.125rem;
    }

    .section-topic--distractions .content__title {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .section-topic--distractions .section-topic__item {
        grid-column: span 1;
        grid-row: auto;
    }

    .footer {
        min-height: 768px;
    }
}