.portfolio-detail {
    @media (min-width: 1201px) {
        display: grid;
        gap: 40px;
        grid-template-columns: auto 43.2%;
    }

    @media (max-width: 1200px) {
        display: grid;
        gap: 20px;
    }
}

.portfolio-detail__info {
    display: flex;
    flex-direction: column;

    @media (min-width: 1201px) {
        gap: 40px;
    }

    @media (max-width: 1200px) {
        gap: 20px;
    }
}

.portfolio-detail h1 {
    color: #000;
    font-weight: bold;
    letter-spacing: 0.32px;
    line-height: 1.2;
    margin-bottom: 0;

    @media (min-width: 1201px) {
        font-size: 55px;
    }

    @media (max-width: 1200px) {
        font-size: 32px;
    }
}

.portfolio-detail .content {
    color: #464646;
    line-height: 1.2;

    @media (min-width: 1201px) {
        font-size: 18px;
    }

    @media (max-width: 1200px) {
        font-size: 15px;
    }

    & h4 {
        color: #bdbdbd;
        font-size: 12px;
        font-weight: 400;
        margin-bottom: 8px;
    }

    & p + h4 {
        margin-top: 24px;
    }

    & p:last-child {
        margin-bottom: 0;
    }
}

.portfolio-detail .gallery-container {
    max-width: 100%;
    overflow: hidden;
}

.swiper-slide.video {
    position: relative;

    &::before {
        background-image: url("data:image/svg+xml,%3Csvg%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M20%2039.5C30.7696%2039.5%2039.5%2030.7696%2039.5%2020C39.5%209.23045%2030.7696%200.5%2020%200.5C9.23045%200.5%200.5%209.23045%200.5%2020C0.5%2030.7696%209.23045%2039.5%2020%2039.5Z'%20stroke='white'/%3E%3Cpath%20d='M15%2027V13L27%2020L15%2027Z'%20fill='white'/%3E%3C/svg%3E") !important;
        content: "";
        height: 40px;
        left: 50%;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        z-index: 10;
    }
}

.portfolio-detail .portfolio-detail__main-image {
    .pagination-btn {
        backdrop-filter: blur(5px);
        background: rgba(52, 52, 52, 0.15);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;

        &::before {
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_9144_13041)'%3E%3Cpath d='M3.46094 11.5379L19.6148 11.5379' stroke='white' stroke-width='2.30769' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.46094 11.5379L10.384 4.61479' stroke='white' stroke-width='2.30769' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.46094 11.5386L10.384 18.4617' stroke='white' stroke-width='2.30769' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_9144_13041' x='-2' y='0.000753513' width='27.0781' height='27.0762' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='2'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_9144_13041'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_9144_13041' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
        }

        &[data-swiper-button-prev] {
            left: 0;
        }

        &[data-swiper-button-next] {
            right: 0;
        }
    }

    .swiper-slide {
        aspect-ratio: 713 / 572;
        border: unset;
        display: flex;
        max-height: 572px;
        opacity: 1;
        overflow: hidden;
        width: auto;

        @media (min-width: 1201px) {
            border-radius: 48px;
        }

        @media (max-width: 1200px) {
            border-radius: 24px;
        }

        &:not(.video)::before {
            background: var(--background-image, #fdfdfd);
            background-position: center;
            background-size: cover;
            content: "";
            height: 100%;
            position: absolute;
            width: 100%;
            z-index: 5;
        }

        &:not(.video)::after {
            backdrop-filter: blur(50px);
            content: "";
            height: 100%;
            position: absolute;
            width: 100%;
            z-index: 6;
        }
    }
}

.portfolio-detail .portfolio-detail__thumb-list {
    margin-top: 16px;

    .swiper-slide {
        border-radius: 8px;
        display: flex;
        height: 82px;
        overflow: hidden;
        width: auto;

        & video,
        & img {
            height: 82px;
            max-width: 250px;
            width: auto;
        }
    }
}

.portfolio-detail .picture {
    display: flex;
    opacity: 1;
    width: 100%;
}

.portfolio-detail .picture img {
    height: 100%;
    object-fit: contain;
    position: relative;
    width: 100%;
    z-index: 10;
}

.portfolio-detail .actions {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;

    @media (min-width: 756px) {
        gap: 16px 48px;
    }

    @media (max-width: 755px) {
        gap: 8px;
        margin-top: 20px;
    }

    .product {
        @media (min-width: 756px) {
            margin-right: auto;
        }

        @media (max-width: 755px) {
            font-size: 15px;
            height: auto;
            justify-content: center;
            line-height: 1.2;
            padding-bottom: 15px;
            padding-top: 15px;
            width: 100%;
        }
    }
}

.portfolio-detail .navigation {
    display: flex;

    @media (min-width: 756px) {
        gap: 16px;
    }

    @media (max-width: 755px) {
        gap: 8px;
        justify-content: space-between;
        width: 100%;
    }

    .button {
        background: #f0f3f4;
        border-radius: 100rem;
        color: #343434;
        display: flex;
        font-size: 13px;
        height: auto;

        @media (min-width: 756px) {
            gap: 8px;
        }

        @media (max-width: 755px) {
            font-size: 12px;
            gap: 4px;
            padding: 15px 11px;
        }

        &.disabled {
            opacity: 0.5;
            pointer-events: none;
        }

        &.previous {
            & svg {
                transform: rotate(180deg);
            }
        }

        svg {
            height: 16px;
            stroke: #343434;
            transition: stroke 0.2s ease-in-out;
            width: 16px;
        }
    }
}