.fragrance-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px clamp(16px, 2vw, 20px);
    text-align: center;
    justify-items: center;
    & .fragrance-item {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: clamp(8px, 2vw, 16px);
        position: relative;
        transition: 0.4s;
        max-width: clamp(160px, 19vw, 306px);
        .fragrance-title {
            font-size: clamp(14px, 2vw, 18px);
            font-family: var(--Medium);
            color: var(--black);
            transition: 0.4s;
        }
        &:hover .fragrance-title {
            color: var(--color1);
        }
        &:before {
            content: "";
            width: clamp(120px, 17vw, 260px);
            height: clamp(120px, 17vw, 260px);
            background: #E7F2E8;
            border-radius: 50%;
            position: absolute;
            top: 0;
            right: 50%;
            transform: translateX(50%);
            z-index: -1;
            transition: 0.4s;
        }
        &:hover:before {
            background: var(--color3);
        }
    }
}
@media only screen and (min-width: 1100px) {
    .fragrance-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}