@import "styles/_typography.scss";
@import "styles/_mixins.scss";

.brand-assets-mark {
    padding: 120px 40px;
    border-radius: 16px;
    &__title {
        text-align: center;
    }
    &__description {
        text-align: center;
        margin: 24px auto 80px;
        max-width: 812px;
        opacity: 0.6;
    }
    &__wrapper {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }
    &-item {
        position: relative;
        flex: 0 1 calc(100% / 3 - 20px * 2 / 3);
        aspect-ratio: 424/320;
        padding: 24px;
        display: flex;
        flex-direction: column;
        background-color: var(--White);
        border-radius: 8px;
        .title {
            position: absolute;
            top: 20px;
            left: 20px;
            opacity: 0.5;
        }
        .logo {
            display: flex;
            justify-content: center;
            margin: auto auto;
        }
        .button-download {
            position: absolute;
            bottom: 20px;
            right: 20px;
            margin-left: auto;
            padding: 16px;
            border-radius: 4px;
            border: 1px solid rgba(85, 71, 235, 0.2);
            aspect-ratio: 1/1;
            width: 52px;
            transition: 0.4s;
            svg {
                display: block;
                color: var(--Blue-purple);
                transition: 0.4s;
            }
            &:hover {
                border: 1px solid rgba(85, 71, 235, 1);
                svg {
                    transform: scale(1.1);
                }
            }
        }

        //Color
        &.white {
            background-color: var(--White);
            border: 1px solid var(--Grey);
        }
        &.dark-blue {
            background: var(--Dark-blue-gradient);
        }
        &.purple {
            background: var(--Purple-gradient);
        }
        &.gray {
            background: var(--Light-Grey);
            border: 1px solid var(--Grey);
        }
        &.dark-blue,
        &.purple {
            .title {
                color: var(--White);
            }
            .button-download {
                border: 1px solid var(--White-20);
                svg {
                    color: var(--White);
                }
                &:hover {
                    border: 1px solid var(--White);
                }
            }
        }
    }
    @include w($lg) {
        &-item {
            flex: 0 1 calc(100% / 2 - 20px / 2);
        }
    }
    @include w($sm) {
        padding: 80px 16px 80px;
        &__wrapper {
            gap: 16px;
        }
        &__description {
            margin: 16px auto 40px;
        }
        &-item {
            flex: 1 1 100%;
            aspect-ratio: 358/256;
            .logo {
                max-width: 96px;
            }
        }
    }
}

• [F] index.jsx
  Delete
• [F] styles.scss
  Delete