/* Current Alteman portfolio, reused here as complete category scenes. */
.astana-portfolio-catalog {
    display: grid;
    gap: 34px;
}

.astana-portfolio-category {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid var(--astana-line);
    background: var(--astana-paper);
}

.astana-portfolio-category__scene {
    position: relative;
    display: block;
    min-height: 560px;
    overflow: hidden;
    background: linear-gradient(145deg, #f3f1ea 0%, #ded9ce 100%);
    isolation: isolate;
}

.astana-portfolio-category__scene::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0 33%, rgba(65, 67, 63, .07) 33% calc(33% + 1px), transparent calc(33% + 1px) 100%),
        linear-gradient(0deg, transparent 0 30%, rgba(65, 67, 63, .07) 30% calc(30% + 1px), transparent calc(30% + 1px) 100%);
    content: "";
}

.astana-portfolio-category__scene:focus-visible { outline: 3px solid var(--astana-orange); outline-offset: -3px; }

.astana-portfolio-sheet {
    position: absolute;
    width: 62%;
    height: 60%;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(65, 67, 63, .25);
    background: var(--astana-white);
    box-shadow: 0 18px 34px rgba(65, 67, 63, .20);
    transition: transform .35s ease, box-shadow .35s ease;
}

.astana-portfolio-sheet img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.astana-portfolio-sheet--1 { z-index: 1; top: 5%; left: 3%; }
.astana-portfolio-sheet--2 { z-index: 2; top: 13%; left: 11%; }
.astana-portfolio-sheet--3 { z-index: 3; top: 21%; left: 19%; }
.astana-portfolio-sheet--4 { z-index: 4; top: 29%; left: 27%; }
.astana-portfolio-sheet--5 { z-index: 5; top: 37%; left: 35%; }

.astana-portfolio-category__scene:hover .astana-portfolio-sheet--1,
.astana-portfolio-category__scene:focus-visible .astana-portfolio-sheet--1 { transform: translate(-5px, -5px); }
.astana-portfolio-category__scene:hover .astana-portfolio-sheet--2,
.astana-portfolio-category__scene:focus-visible .astana-portfolio-sheet--2 { transform: translate(-2px, -2px); }
.astana-portfolio-category__scene:hover .astana-portfolio-sheet--4,
.astana-portfolio-category__scene:focus-visible .astana-portfolio-sheet--4 { transform: translate(2px, 2px); }
.astana-portfolio-category__scene:hover .astana-portfolio-sheet--5,
.astana-portfolio-category__scene:focus-visible .astana-portfolio-sheet--5 { transform: translate(5px, 5px); box-shadow: 0 22px 38px rgba(65, 67, 63, .27); }

.astana-portfolio-category__info {
    display: flex;
    flex-direction: column;
    padding: 30px;
    border-left: 1px solid var(--astana-line);
}

.astana-portfolio-category__info > .astana-index {
    color: var(--astana-orange);
    text-align: center;
}

.astana-portfolio-category__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    text-align: center;
}

.astana-portfolio-category h3 {
    width: 100%;
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 42px;
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .98;
    text-align: center;
}

.astana-portfolio-category h3 a {
    color: var(--astana-graphite);
    text-decoration: none;
}

.astana-portfolio-category h3 a:hover,
.astana-portfolio-category h3 a:focus-visible { color: var(--astana-orange); text-decoration: underline; text-underline-offset: .14em; }

.astana-portfolio-category__heading img {
    display: block;
    width: 132px;
    height: 132px;
    object-fit: contain;
}

.astana-portfolio-category__heading > a:focus-visible { outline: 3px solid var(--astana-orange); outline-offset: 4px; }

.astana-portfolio-category__count {
    margin: 14px 0 0;
    color: var(--astana-muted);
    font-size: 16px;
    text-align: center;
}

.astana-portfolio-category__description {
    margin: 30px 0;
    color: var(--astana-muted);
    font-size: 15px;
    line-height: 1.5;
}

.astana-portfolio-category__link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--astana-line);
    color: var(--astana-orange);
    font-family: Oswald, Impact, sans-serif;
    font-size: 18px;
    letter-spacing: .02em;
    text-decoration: none;
    text-transform: uppercase;
}

.astana-portfolio-category__link:hover,
.astana-portfolio-category__link:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 1000px) {
    .astana-portfolio-category { grid-template-columns: 1fr; }
    .astana-portfolio-category__scene { min-height: 420px; }
    .astana-portfolio-category__info { min-height: 300px; border-top: 1px solid var(--astana-line); border-left: 0; }
}

@media (max-width: 560px) {
    .astana-portfolio-catalog { gap: 24px; }
    .astana-portfolio-category__scene { min-height: 335px; }
    .astana-portfolio-category__info { padding: 24px; }
    .astana-portfolio-category h3 { font-size: 37px; }
    .astana-portfolio-category__heading img { width: 108px; height: 108px; }
}