.gem-sizes {
    padding-top: var(--spacer-sections)
}

@media(min-width: 64rem) {
    .gem-sizes {
        width:100%;
        margin: 0 auto;
        max-width: 1200px
    }
}

.gem-sizes__title {
    text-align: center;
    grid-column: 2/span 10;
    margin: 0 auto;
    padding-bottom: 5.5rem;
    color: #fff
}

@media(min-width: 64rem) {
    .gem-sizes__title {
        max-width:712px;
        padding-bottom: 60px
    }
}

.gem-sizes__list {
    grid-column: 2/span 10;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 88px
}

@media(min-width: 64rem) {
    .gem-sizes__list {
        gap:0;
        flex-direction: row;
        justify-content: space-between
    }
}

.gem-sizes__list .gem-sizes-item {
    display: flex;
    flex-direction: column;
    align-items: center
}

.gem-sizes__list .gem-sizes-item>.js-hover {
    position: relative;
    width: 250px;
    height: 250px
}

.gem-sizes__list .gem-sizes-item>.js-hover .gradient-border {
    height: 100%;
    width: 100%
}

.gem-sizes__list .gem-sizes-item>.js-hover .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 3
}

.gem-sizes__list .gem-sizes-item>.js-hover .content p {
    margin: 0
}

.gem-sizes__list .gem-sizes-item .gem-sizes__name {
    font-size: 2.125rem;
    line-height: normal
}

.gem-sizes__list .gem-sizes-item .gem-sizes__label {
    font-size: 1.125rem;
    line-height: normal;
    color: var(--text-light)
}

.gem-sizes__list .gem-sizes-item .gem-sizes__tags {
    margin-top: 20px;
    margin-bottom: 12px;
    display: flex;
    gap: 12px
}

.gem-sizes__list .gem-sizes-item .gem-sizes__text {
    text-align: center;
    max-width: 250px;
    color: var(--text-light)
}

@media(min-width: 64rem) {
    .gem-sizes__list .gem-sizes-item .gem-sizes__text {
        line-height:120%
    }
}