
.advantages__container{
  padding: var(--spacing-2xl) 0;
  display: grid;
  grid-template-columns: 2fr repeat(3, minmax(200px, 1fr));
  gap: var(--spacing-m);
  align-items: stretch;
}
.advantages{
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-l);
    border-radius: var(--round-lg);
    padding: var(--spacing-l);
    background: var(--color-gradient);
    background-position: bottom right;
    background-size: cover;
    border: 2px solid var(--color-tertiary);
    text-align: center;
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
    will-change: transform, box-shadow;
}

.advantages:hover{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.advantages:nth-of-type(1){
    transform-origin: top left;
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
}
.advantages:nth-of-type(1):hover{
    transform: rotate(3deg);
}

.advantages:nth-of-type(2){
    transform-origin: bottom left;
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
}
.advantages:nth-of-type(2):hover{
    transform: rotate(-2deg);
}

.advantages:nth-of-type(3){
    transform-origin: top right;
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
}
.advantages:nth-of-type(3):hover{
    transform: rotate(2deg);
}

.advantages__title {
    color: var(--color-primary);
    width: 80%;

}

.advantages__text{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding-right: var(--spacing-2xl);
    width: 100%;
}

.advantages__img{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10%;
}
.advantages__img-el{
    width: 100%; height: 100%; object-fit: contain;
}

.mobile-only-sm {
    display:none;
}

@media (max-width: 1500px) {
    .advantages__container {
        /*grid-template-columns: 1fr repeat(3, minmax(200px, 1fr));*/
    }
    .advantages__text {
        width: 100%;
    }
    h3 {
        font-size: var(--heading-size-4)
    }
}

@media (max-width: 1300px) {
    .advantages {
            height: 400px;
    }
}



@media (max-width: 1000px){
  .advantages__container{
      grid-template-columns: repeat(3, 1fr);
  }
  .advantages__text {
      grid-column: 1 / -1;
      padding-right: 0;
  }
}

@media (max-width: 600px) {
    .mobile-only-sm {
        display: block;
    }

    .advantages__intro {
        display: none;
    }
    .advantages__container {
        display:flex;
        flex-direction: column;
        gap: var(--spacing-xl);

    }
    .advantages__img {
        padding: 0;
        flex: none;
        height: 100px;
    }

    .advantages {
        display: flex;
        height: auto;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row-reverse;
    }

    .advantages > div:first-child {
        text-align: left;
        padding-left: 30px;
        width: 100%;
    }

    .advantages h3 {
        font-size: var(--heading-size-3) !important;
    }

}
