html {
    --fine: 4px;
    --tiny: 8px;
    --small: 16px;
    --medium: 24px;
    --large: 48px;
    --huge:72px
}

:root {
    --white: #fff;
    --black: #000;
    --pink: #eb5f8e;
    --light-green: #72b72a;
    --light-blue: #35adce;
    --yellow: #fcc31e;
    --red: #d60000;
    --dark-blue: #00528a;
    --olive: #b9cc3f;
    --turquoise: #00ceb3;
    --light-orange: #f39722;
    --lavender: #c380bb;
    --dove-grey: #666;
    --graphite: #2f2e31;
    --alto: #d0d0d0;
    --gallery: #ececec;
    --wild-sand: #f5f5f5;
    --pastel-green: #e3f1d4;
    --pastel-red: #fbe6e6;
    --pastel-yellow: #fef3d2;
    --pastel-blue:#d7eff5
}

.phones-grid {
    grid-gap: var(--medium);
    display: grid;
    gap: var(--medium);
    margin-bottom:var(--medium)
}

.phone-card {
    background-color: var(--wild-sand);
    display:grid
}

.phone-card__inner {
    grid-gap: 24px;
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: -webkit-max-content 1fr;
    grid-template-columns: max-content 1fr;
    margin-bottom: var(--medium);
    margin-top:var(--medium)
}

.phone-card__img {
    height: 180px;
    max-width: 118px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: top;
    object-position: top;
    width:auto
}

.right-column {
    display:grid
}

.phone-card__line {
    border:1px solid var(--alto)
}

.colors {
    grid-gap: var(--fine);
    display: grid;
    gap: var(--fine);
    grid-auto-columns: 16px;
    grid-auto-flow: column;
    margin-bottom:var(--small)
}

.color {
    border: 2px solid var(--black);
    border-radius: 50%;
    height:16px
}

.promo-message {
    background-color: var(--yellow);
    -webkit-clip-path: polygon(0 3%, 100% 0, 98% 100%, 0 86%);
    clip-path: polygon(0 3%, 100% 0, 98% 100%, 0 86%);
    color: var(--black);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 21px;
    margin-bottom: var(--small);
    padding: var(--fine) var(--tiny);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width:fit-content
}

@media (min-width: 700px) {
    .with-promo .promo-message {
        margin-bottom: 0;
        order:2
    }
}

.phone-price {
    display: flex;
    flex-direction: column;
    margin-bottom:var(--small)
}

.phone-price-price {
    line-height:39px
}

.now-in-stock {
    align-content: center;
    align-items: center;
    display: flex;
    margin-top: var(--small);
    order:3
}

.now-in-stock__text {
    margin-left: var(--tiny);
    position: relative;
    top:2px
}

.phone-card__top-section {
    margin:var(--small) var(--small) var(--small) var(--small)
}

.phone-card__bottom-section {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin:auto var(--small) var(--small) var(--small)
}

.gg-c-checkbox {
    padding-left:32px
}

.gg-c-checkbox__text {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 21px;
    margin-top:1px
}

.gg-c-checkbox__pseudo-checkbox:after, .gg-c-checkbox__pseudo-checkbox:before {
    height: var(--medium);
    width:var(--medium)
}

.gg-c-checkbox__pseudo-checkbox:after {
    background-size:var(--small)
}

.view-details-btn {
    background-color: var(--graphite);
    color: var(--white) !important;
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 21px;
    padding: var(--tiny) var(--small);
    text-align:center
}

@media (min-width: 345px) {
    .phone-card__img {
        max-width:revert
    }
}

@media (min-width: 700px) {
    .inner-inner {
        display:grid
    }

    .promo-message {
        order:2
    }

    .phones-grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (min-width: 1100px) {
    .phones-grid {
        grid-template-columns:repeat(3, 1fr)
    }
}

@media (min-width: 1150px) {
    .phones-grid {
        grid-gap: 40px;
        gap:40px
    }
}

.gg-s-website-footer a, .gg-s-website-footer abbr, .gg-s-website-footer acronym, .gg-s-website-footer address, .gg-s-website-footer applet, .gg-s-website-footer article, .gg-s-website-footer aside, .gg-s-website-footer audio, .gg-s-website-footer b, .gg-s-website-footer big, .gg-s-website-footer blockquote, .gg-s-website-footer body, .gg-s-website-footer canvas, .gg-s-website-footer caption, .gg-s-website-footer center, .gg-s-website-footer cite, .gg-s-website-footer code, .gg-s-website-footer dd, .gg-s-website-footer del, .gg-s-website-footer details, .gg-s-website-footer dfn, .gg-s-website-footer div, .gg-s-website-footer dl, .gg-s-website-footer dt, .gg-s-website-footer em, .gg-s-website-footer embed, .gg-s-website-footer fieldset, .gg-s-website-footer figcaption, .gg-s-website-footer figure, .gg-s-website-footer footer, .gg-s-website-footer form, .gg-s-website-footer h1, .gg-s-website-footer h2, .gg-s-website-footer h3, .gg-s-website-footer h4, .gg-s-website-footer h5, .gg-s-website-footer h6, .gg-s-website-footer header, .gg-s-website-footer hgroup, .gg-s-website-footer html, .gg-s-website-footer i, .gg-s-website-footer iframe, .gg-s-website-footer img, .gg-s-website-footer ins, .gg-s-website-footer kbd, .gg-s-website-footer label, .gg-s-website-footer legend, .gg-s-website-footer li, .gg-s-website-footer mark, .gg-s-website-footer menu, .gg-s-website-footer nav, .gg-s-website-footer object, .gg-s-website-footer ol, .gg-s-website-footer output, .gg-s-website-footer p, .gg-s-website-footer pre, .gg-s-website-footer q, .gg-s-website-footer ruby, .gg-s-website-footer s, .gg-s-website-footer samp, .gg-s-website-footer section, .gg-s-website-footer small, .gg-s-website-footer span, .gg-s-website-footer strike, .gg-s-website-footer strong, .gg-s-website-footer sub, .gg-s-website-footer summary, .gg-s-website-footer sup, .gg-s-website-footer table, .gg-s-website-footer tbody, .gg-s-website-footer td, .gg-s-website-footer tfoot, .gg-s-website-footer th, .gg-s-website-footer thead, .gg-s-website-footer time, .gg-s-website-footer tr, .gg-s-website-footer tt, .gg-s-website-footer u, .gg-s-website-footer ul, .gg-s-website-footer var, .gg-s-website-footer video {
    border: 0;
    font-size: 100%;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align:baseline
}

.gg-s-website-footer article, .gg-s-website-footer aside, .gg-s-website-footer details, .gg-s-website-footer figcaption, .gg-s-website-footer figure, .gg-s-website-footer footer, .gg-s-website-footer header, .gg-s-website-footer hgroup, .gg-s-website-footer menu, .gg-s-website-footer nav, .gg-s-website-footer section {
    display:block
}

.gg-s-website-footer body {
    line-height:1
}

.gg-s-website-footer ol, .gg-s-website-footer ul {
    list-style:none
}

.gg-s-website-footer blockquote, .gg-s-website-footer q {
    quotes:none
}

.gg-s-website-footer blockquote:after, .gg-s-website-footer blockquote:before, .gg-s-website-footer q:after, .gg-s-website-footer q:before {
    content: "";
    content:none
}

.gg-s-website-footer table {
    border-collapse: collapse;
    border-spacing:0
}

.gg-s-website-footer dialog {
    background-color: #fff;
    border: 0;
    display: block;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 0;
    position: absolute;
    right: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width:fit-content
}

.gg-s-website-footer dialog::-webkit-backdrop {
    background-color:rgba(0, 0, 0, .5)
}

.gg-s-website-footer dialog + .backdrop, .gg-s-website-footer dialog::backdrop {
    background-color:rgba(0, 0, 0, .5)
}

.gg-s-website-footer dialog:not([open]) {
    display:none
}

.gg-s-website-footer dialog + .backdrop {
    background-color:rgba(0, 0, 0, .5)
}

.gg-s-website-footer ._dialog_overlay, .gg-s-website-footer dialog + .backdrop {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top:0
}

.gg-s-website-footer body {
    color: #000;
    font-family: Poppins, giffgaff, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    min-width:320px
}

.gg-s-website-footer a {
    color: inherit;
    text-decoration:none
}

.gg-s-website-footer mark {
    background-color: transparent;
    color:inherit
}

.gg-s-website-footer input, .gg-s-website-footer select, .gg-s-website-footer textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family:inherit
}

.gg-s-website-footer input, .gg-s-website-footer textarea {
    border-radius:0
}

.gg-s-website-footer button {
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    outline-color: transparent;
    padding:0
}

.gg-s-website-footer button:disabled {
    color:inherit
}

.gg-s-website-footer summary {
    display:block
}

.gg-s-website-footer summary::-webkit-details-marker {
    display:none
}

.gg-s-website-footer summary:focus {
    outline-color:transparent
}

.gg-s-website-footer hr {
    margin:0
}

.gg-s-website-footer *, .gg-s-website-footer :after, .gg-s-website-footer :before {
    box-sizing:border-box
}

.gg-s-website-footer .gg-c-website-footer {
    background-color: #000;
    color: #fff;
    font-family: Poppins, giffgaff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 18px;
    padding-bottom:24px
}

.gg-s-website-footer .gg-c-website-footer__section {
    margin-left: 8px;
    margin-right: 8px;
    max-width:1140px
}

@media screen and (min-width: 360px) {
    .gg-s-website-footer .gg-c-website-footer__section {
        margin-left: 16px;
        margin-right:16px
    }
}

@media screen and (min-width: 768px) {
    .gg-s-website-footer .gg-c-website-footer__section {
        margin-left: 24px;
        margin-right:24px
    }
}

@media screen and (min-width: 992px) {
    .gg-s-website-footer .gg-c-website-footer__section {
        margin-left: 48px;
        margin-right:48px
    }
}

@media screen and (min-width: 1236px) {
    .gg-s-website-footer .gg-c-website-footer__section {
        margin-left: auto;
        margin-right: auto;
        width:1140px
    }
}

.gg-s-website-footer .gg-c-website-footer__network {
    font-size: 16px;
    font-weight: 700;
    line-height:24px
}

.gg-s-website-footer .gg-c-website-footer__social {
    display: flex;
    margin-left: -8px;
    margin-top:24px
}

.gg-s-website-footer .gg-c-website-footer__social-link {
    align-items: center;
    border: 2px solid #fff;
    display: flex;
    height: 48px;
    justify-content: center;
    margin-left: 8px;
    transition: background-color .35s ease-out;
    width:48px
}

.gg-s-website-footer .gg-c-website-footer__social-link:hover {
    background-color: #fff;
    color:#000
}

.gg-s-website-footer .gg-c-website-footer__social-icon {
    height: 24px;
    width:24px
}

.gg-s-website-footer .gg-c-website-footer__nav {
    display: flex;
    justify-content: space-between;
    margin-top:16px
}

.gg-s-website-footer .gg-c-website-footer__nav-group {
    flex-basis:calc(50% - 8px)
}

.gg-s-website-footer .gg-c-website-footer__nav-link {
    align-items: center;
    border-bottom: 2px solid #fff;
    display: flex;
    height:48px
}

@media (max-width: 679px) {
    .gg-s-website-footer .gg-c-website-footer {
        padding-top:24px
    }

    .gg-s-website-footer .gg-c-website-footer__small-print {
        margin-top:24px
    }
}

@media (min-width: 680px) {
    .gg-s-website-footer .gg-c-website-footer__section {
        padding-top:24px
    }

    .gg-s-website-footer .gg-c-website-footer__copyright-social {
        display: flex;
        justify-content:space-between
    }

    .gg-s-website-footer .gg-c-website-footer__social {
        margin:0
    }
}

@media (min-width: 800px) {
    .gg-s-website-footer .gg-c-website-footer {
        padding:0 0 48px
    }

    .gg-s-website-footer .gg-c-website-footer__nav {
        display: block;
        flex: none;
        margin-bottom: -16px;
        margin-top:0
    }

    .gg-s-website-footer .gg-c-website-footer__nav-link {
        height: 24px;
        padding:0 4px
    }

    .gg-s-website-footer .gg-c-website-footer__section {
        padding-top:48px
    }

    .gg-s-website-footer .gg-c-website-footer__nav-group {
        display: flex;
        flex-basis: auto;
        justify-content: center;
        margin-bottom: 16px;
        margin-left:-24px
    }

    .gg-s-website-footer .gg-c-website-footer__nav-item {
        margin-left:24px
    }
}

@media (hover: hover) {
    .gg-s-website-footer .gg-c-website-footer__nav-link {
        border-bottom-color: transparent;
        transition:border-bottom-color .25s ease-out
    }

    .gg-s-website-footer .gg-c-website-footer__nav-link:hover {
        border-bottom-color:#fff
    }
}

.gg-c-website-footer {
    background-color: var(--black);
    color: var(--white);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 18px;
    padding-bottom:24px
}

.gg-c-website-footer__section {
    margin-left: 8px;
    margin-right: 8px;
    max-width:1140px
}

@media screen and (min-width: 360px) {
    .gg-c-website-footer__section {
        margin-left: 16px;
        margin-right:16px
    }
}

@media screen and (min-width: 768px) {
    .gg-c-website-footer__section {
        margin-left: 24px;
        margin-right:24px
    }
}

@media screen and (min-width: 992px) {
    .gg-c-website-footer__section {
        margin-left: 48px;
        margin-right:48px
    }
}

@media screen and (min-width: 1236px) {
    .gg-c-website-footer__section {
        margin-left: auto;
        margin-right: auto;
        width:1140px
    }
}

.gg-c-website-footer__network {
    font-size: 16px;
    font-weight: 700;
    line-height:24px
}

.gg-c-website-footer__social {
    display: flex;
    margin-left: -8px;
    margin-top:24px
}

.gg-c-website-footer__social-link {
    align-items: center;
    border: 2px solid var(--white);
    display: flex;
    height: 48px;
    justify-content: center;
    margin-left: 8px;
    transition: background-color .35s ease-out;
    width:48px
}

.gg-c-website-footer__social-icon {
    height: 24px;
    width:24px
}

.gg-c-website-footer__nav {
    display: flex;
    justify-content: space-between;
    margin-top:16px
}

.gg-c-website-footer__nav-group {
    flex-basis:calc(50% - 8px)
}

.gg-c-website-footer__nav-link {
    align-items: center;
    border-bottom: 2px solid #fff;
    display: flex;
    height:48px
}

@media (max-width: 679px) {
    .gg-c-website-footer {
        padding-top:24px
    }

    .gg-c-website-footer__small-print {
        margin-top:24px
    }
}

@media (min-width: 680px) {
    .gg-c-website-footer__section {
        padding-top:24px
    }

    .gg-c-website-footer__copyright-social {
        display: flex;
        justify-content:space-between
    }

    .gg-c-website-footer__social {
        margin:0
    }
}

@media (min-width: 800px) {
    .gg-c-website-footer {
        padding:0 0 48px
    }

    .gg-c-website-footer__nav {
        display: block;
        flex: none;
        margin-bottom: -16px;
        margin-top:0
    }

    .gg-c-website-footer__nav-link {
        height: 24px;
        padding:0 4px
    }

    .gg-c-website-footer__section {
        padding-top:48px
    }

    .gg-c-website-footer__nav-group {
        display: flex;
        flex-basis: auto;
        justify-content: center;
        margin-bottom: 16px;
        margin-left:-24px
    }

    .gg-c-website-footer__nav-item {
        margin-left:24px
    }
}

.gg-c-website-footer__social-link:hover {
    background-color: var(--white);
    color:var(--black)
}

@media (hover: hover) {
    .gg-c-website-footer__nav-link {
        border-bottom-color: transparent;
        transition:border-bottom-color .25s ease-out
    }

    .gg-c-website-footer__nav-link:hover {
        border-bottom-color: var(--white)
    }
}