*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --background-color: #2c0909;
    --background-color-product: rgb(255, 252, 252);
    --font-color-white: white;
    --switch-color-purple: #6D0196;
    --switch-color-pink: #f1f51c;
    --switch-color-black: #000000;
    --switch-color-darkpink: #1d0d1a;
    --switch-color-purple-less-opactiy: rgba(217, 199, 224, 0.8);
    --switch-color-pink-less-opactiy: rgba(207, 186, 203, 0.8);
    --switch-color-black-less-opactiy: rgba(0, 0, 0, 0.8);
    --switch-color-darkpink-less-opactiy: rgba(12, 11, 11, 0.8);
    --switch-color-purple-No-opactiy: rgba(255, 255, 255, 0.3);
    --switch-color-pink-No-opactiy: rgba(255, 255, 255, 0.3);
    --switch-color-black-No-opactiy: rgba(255, 255, 255, 0.3);
    --switch-color-darkpink-No-opactiy: rgba(255, 255, 255, 0.3);
}

html {
    font-size: 62.5%;
}

body {
    font-size: 2rem;
    background: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    gap: 4rem;
    font-family: "Open Sans", sans-serif;
    flex-wrap: wrap;
    padding: 4rem;
}

.modal {
    width: 80vw;
    height: 90vh;
    display: grid;
    grid-template-columns: 50% 50%;
    height: auto;
    position: relative;
    display: none;
}

.modal__figure {
    width: 100%;
    height: 100%;
    padding: 4rem;
}

.modal__figure--purple {
    background-color: var(--switch-color-purple-No-opactiy);
}

.modal__figure--pink {
    background-color: var(--switch-color-pink-No-opactiy);
}

.modal__figure--black {
    background-color: var(--switch-color-black-No-opactiy);
}

.modal__figure--darkpink {
    background-color: var(--switch-color-darkpink);
}

.modal__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modal__section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    background: var(--background-color-product);
}

.modal__heading {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 150%;
}

.modal__heading--purple {
    border-bottom: 0.5rem solid var(--switch-color-purple-No-opactiy);
}

.modal__heading--pink {
    border-bottom: 0.5rem solid var(--switch-color-pink-No-opactiy);
}

.modal__heading--black {
    border-bottom: 0.5rem solid var(--switch-color-black-No-opactiy);
}

.modal__heading--darkpink {
    border-bottom: 0.5rem solid var(--switch-color-darkpink);
}

.modal__text {
    font-size: 80%;
    font-weight: 400;
    line-height: 1.5;
}

.modal__link {
    font-size: 80%;
}

.modal__button {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    width: 7rem;
    height: 7rem;
    border: none;
    border-radius: 50%;
    font-size: 130%;
    font-weight: 500;
}

.modal__button--purple {
    background: var(--switch-color-purple-less-opactiy);
}

.modal__button--pink {
    background: var(--switch-color-pink-less-opactiy);
}

.modal__button--black {
    background: var(--switch-color-black-less-opactiy);
}

.modal__button--darkpink {
    background: var(--switch-color-darkpink);
}

.modal__button:hover {
    cursor: pointer;
}

.product {
    width: 32rem;
    height: 40rem;
    position: relative;
    background: var(--background-color-product);
}

.product:hover {
    cursor: pointer;
}

.product:hover .product__figure::after {
    transform: translate(-50%, -45%);
    width: 25rem;
    height: 25rem;
}

.product:hover .product__figure {
    transform: translateY(-2rem) scale(0.8);
}

.product::after {
    content: "";
    position: absolute;
    top: 95%;
    left: 0;
    height: 10%;
    width: 100%;
    background: red;
    filter: blur(0.8rem);
}

.product--purple::after {
    background: var(--switch-color-purple-less-opactiy);
}

.product--pink::after {
    background: var(--switch-color-pink-less-opactiy);
}

.product--black::after {
    background: var(--switch-color-black-less-opactiy);
}

.product--darkpink::after {
    background: var(--switch-color-darkpink-less-opactiy);
}

.product__figure {
    height: 80%;
    width: 100%;
    padding: 2rem;
    position: relative;
    z-index: 1;
    transition: 0.2s all;
}

.product__figure::after {
    content: "";
    width: 20rem;
    height: 20rem;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: 0.2s all;
}

.product__figure--Purple::after {
    background: var(--switch-color-purple-No-opactiy);
}

.product__figure--pink::after {
    background: var(--switch-color-pink-No-opactiy);
}

.product__figure--black::after {
    background: var(--switch-color-black-No-opactiy);
}

.product__figure--darkpink::after {
    background: var(--switch-color-darkpink-No-opactiy);
}

.product__image {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.product__section {
    height: 20%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: blue;
}

.product__section--Purple {
    background: var(--switch-color-purple);
}

.product__section--Pink {
    background: var(--switch-color-pink);
}

.product__section--black {
    background: var(--switch-color-black);
}

.product__section--darkPink {
    background: var(--switch-color-darkpink);
}

.product__button {
    outline: none;
    border: none;
    background: none;
    color: var(--font-color-white);
    font-size: 80%;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
}

@media screen and (max-width:62.5rem) {
    .modal {
        grid-template-columns: 100%;
    }

    .modal__button {
        display: none;
    }
}