.profitable-block {
    position: relative;
    padding-top: var(--Margin-60);
    background-color: var(--Background-secondary);
    padding-bottom: var(--Margin-40);
    margin-bottom: var(--Margin-30)
}

.profitable__items {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--Gap-30);

    & > *:first-child {
        background-color: var(--Primary);

        & .profitable__item-more {
            color: var(--Head-secondary);
        }
    }
    & > *:first-child .profitable__item-title {
        color: var(--Head-secondary);
    }
    & > *:first-child .profitable__item-text {
        color: var(--Main-text-secondary);
    }
}

.profitable__item  {
    position: relative;
    border-radius: 5px;
    background-color: var(--Background);
    overflow: hidden;
    min-height: clamp(140px, 97.2222px + 9.7222vw, 280px);

    &.image {
        grid-column: span 2;

        display: flex;
        align-items: stretch;

        background-color: var(--Background-secondary);
        border: solid 1px var(--Stroke);
    }
}
.profitable__item.image {
    .profitable__item-wrapper {
        width: 0%;
        flex-grow: 1;
    }
}

.profitable__item-wrapper {
    position: relative;
    padding: var(--Padding-30);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--Gap-30);
}
.profitable__item__img-wrapper {
    position: relative;
    width: 48%;
    height: auto;
    aspect-ratio: 360 / 280;
}
.profitable__item__img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.profitable__item-header {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--Gap-20);
    justify-content: space-between;
}
.profitable__item-title {
    color: var(--Head-primary);
}
.profitable__item-text {
    color: var(--Main-text-primary);
}
.profitable__item-icon {
    position: relative;
    width: clamp(55px, 47.3611px + 1.7361vw, 80px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
}
.profitable__item-more {
    position: relative;
    color: var(--Primary);
}

@media(max-width: 1000px) {
    .profitable__items {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width: 460px) {
    .profitable__items {
        grid-template-columns: repeat(1, 1fr);
    }
    .profitable__item.image {
        grid-column: span 1;

        flex-direction: column-reverse;

        & .profitable__item-wrapper {
            width: 100%;
        }
        & .profitable__item__img-wrapper {
            width: 100%;
            max-height: 180px;
        }
    }
}



.profitable__advantages {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--Gap-30);
}
.profitable__advantage {
    position: relative;
    padding: var(--Padding-10);
    border-radius: 5px;
    border: solid 1px var(--Stroke);
    display: flex;
    align-items: center;
    gap: var(--Gap-15);
}
.profitable__advantage__icon-wrapper {
    position: relative;
    width: clamp(50px, 37.7778px + 2.7778vw, 90px);
    height: auto;
    aspect-ratio: 1;
    background-color: var(--Background-secondary);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profitable__advantage__icon {
    position: relative;
    width: 55.611%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
}
.profitable__advantage-text {
    position: relative;
    color: var(--Head-primary);
    display: block;
    width: 0%;
    flex-grow: 1;
}

@media(max-width: 1000px) {
    .profitable__advantages {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width: 460px) {
    .profitable__advantages {
        grid-template-columns: repeat(1, 1fr);
    }
}