.root {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.root[data-scheme='dark'] {
    background-color: var(--color-bg-base-dark);
}

.container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        'title title'
        'tags image'
        'button image';
    gap: 32px 96px;
    padding: 72px 120px;
    max-width: var(--content-max-width);
}

.title {
    grid-area: title;
    max-width: 780px;
    margin-bottom: 16px;
}

.tagsList {
    grid-area: tags;
    display: flex;
    flex-direction: column;
}

.callbackButton {
    grid-area: button;
}

.image {
    grid-area: image;
    max-width: 477px;
    max-height: 622px;
    border-radius: 19px;
    object-fit: cover;
}

.tagItem {
    padding: 18px 0;
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--border-color-light);
}

.tagItem:first-child {
    padding-top: 0;
}

.tagItem:last-child {
    padding-bottom: 0;
}

.root[data-scheme='dark'] .tagItem {
    border-bottom: 1px solid var(--border-color-alpha-white-10);
}

.tagItem:last-child {
    border-bottom: none;
}

.tagText {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.tagLabel {
    color: var(--color-text-primary);
}

.tagDescription {
    color: var(--color-text-secondary);
}

/* Dark mode overrides */
.root[data-scheme='dark'] .tagLabel {
    color: var(--color-text-primary-inverted);
}

.root[data-scheme='dark'] .tagDescription {
    color: var(--color-text-secondary-inverted);
}

.iconWrapper {
    display: flex;
    width: 52px;
    height: 52px;
    padding: 12px;
    border-radius: 7.8px;
    background: var(--Gradient-01, linear-gradient(93deg, #81b1e2 8.06%, #2666a6 160.95%));
}

.root[data-scheme='dark'] .iconWrapper {
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%),
        var(--Background-fill-neutral-dark, #1a1a1a);
}

.icon {
    width: 28px;
    height: 28px;
    color: var(--color-white);
}

@media (max-width: 1240px) {
    .container {
        padding: 64px 120px;
        gap: 32px 64px;
    }

    .title h2 {
        font-size: var(--font-size-display-md);
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-xl);
    }
}

@media (max-width: 1150px) {
    .container {
        gap: 32px 56px;
        padding: 56px 64px;
    }

    .title {
        margin-bottom: 8px;
    }

    .title h2 {
        font-size: var(--font-size-display-sm);
        line-height: var(--line-height-xs);
        letter-spacing: var(--letter-spacing-negative-xl);
    }

    .image {
        grid-area: image;
        max-width: 360px;
        max-height: 480px;
        border-radius: 14px;
    }
}

@media (max-width: 820px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            'title'
            'image'
            'tags'
            'button';
        padding: 56px 48px;
        gap: 32px;
    }

    .title {
        max-width: unset;
    }

    .title h2 {
        font-size: var(--font-size-display-xs);
    }

    .image {
        width: 100%;
        max-width: unset;
        max-height: 350px;
    }

    .tagsList {
        margin-top: 16px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 48px 32px;
    }

    .title {
        margin-bottom: unset;
    }

    .tagsList {
        margin-top: 8px;
    }
}

@media (max-width: 600px) {

    .image {
        max-height: 270px;
    }
    .container {
        padding: 48px 28px;
    }

    .tagsList {
        margin-top: unset;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 40px 24px; 
    }

    .title {
        margin-bottom: -4px;
    }

    .title h2 {
        font-size: var(--font-size-heading-xl);
        line-height: var(--line-height-sm);
        letter-spacing: var(--letter-spacing-negative-xl);
    }

    .image {
        max-height: 215px;
    }

    .iconWrapper {
        width: 42px;
        height: 42px;
        padding: 10px;
        border-radius: 6.3px;
    }

    .icon {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 375px) {
    .container {
        padding: 32px 20px;
    }

    .title {
        margin-bottom: -8px;
    }

    .image {
        max-height: 167px;
    }
}

@media (max-width: 320px) {
    .container {
        padding: 28px 16px;
        gap: 24px;
    }

    .title {
        margin-bottom: -4px;
    }
}