/* GridLayout */
.grid {
    display: grid;
}

.c-grid {
    width: 100%;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 190px);
    grid-gap: 15px;
    grid-template-areas: "elemento1 elemento1 elemento2 elemento2 elemento6 elemento6 elemento4 elemento4"
                         "elemento1 elemento1 elemento8 elemento7 elemento3 elemento3 elemento5 elemento5" 
                         "elemento1 elemento1 elemento9 elemento9 elemento10 elemento10 elemento11 elemento11"
                         "elemento1 elemento1 hpo hpo hpo hpo2 hpo2 hpo2";
}

.c-grid .c-grid__element {
    border-radius: 15px;
    -webkit-box-shadow: 2px 3px 5px rgba(58, 58, 58, 0.705);
    box-shadow: 2px 3px 5px rgba(58, 58, 58, 0.705);
    padding: 20px;
    position: relative;
    line-height: 1.1;
}

.c-grid .c-grid__element .iconItem {
    fill: white;
}

.c-grid .c-grid__element-icon {
    position: absolute;
    bottom: 18px;
    right: 15px;
    fill: white;
}

.c-grid .c-grid__element h3 {
    font-family: 'Bowlby One SC';
    font-size: 16px;
    text-transform: uppercase;
}

.c-grid .c-grid__element--grooming {
    /* grid-column: 1/3;
    grid-row: 1/4; */
    grid-area: elemento1;
    background: white;
}


.c-grid .c-grid__element--clasico {
    /* grid-column: 3/5;
    grid-row: 1/2; */
    grid-area: elemento2;
    background: #35A8C6;
    color: white;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--clasico:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--clasico:hover h3 {
    color: #35A8C6;
}

.c-grid .c-grid__element--clasico:hover .c-grid__element-icon,
.c-grid .c-grid__element--clasico:hover .iconItem {
    fill: #35A8C6 !important;
}

.c-grid .c-grid__element--coqueto-01 {
    /* grid-column: 5/7;
    grid-row: 1/2; */
    grid-area: elemento3;
    color: white;
    background: #66338B;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--coqueto-01:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--coqueto-01:hover h3 {
    color: #66338B;
}

.c-grid .c-grid__element--coqueto-01:hover .c-grid__element-icon,
.c-grid .c-grid__element--coqueto-01:hover .iconItem {
    fill: #66338B !important;
}

.c-grid .c-grid__element--coqueto-02 {
    /* grid-column: 5/7;
    grid-row: 2/3; */
    grid-area: elemento6;
    color: white;
    background: #66338B;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--coqueto-02:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--coqueto-02:hover h3 {
    color: #66338B;
}

.c-grid .c-grid__element--coqueto-02:hover .c-grid__element-icon,
.c-grid .c-grid__element--coqueto-02:hover .iconItem {
    fill: #66338B !important;
}

.c-grid .c-grid__element--delux-01 {
    /* grid-column: 7/9;
    grid-row: 1/2; */
    grid-area: elemento4;
    color: white;
    background: #374697;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--delux-01:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--delux-01:hover h3 {
    color: #374697;
}

.c-grid .c-grid__element--delux-01:hover .c-grid__element-icon,
.c-grid .c-grid__element--delux-01:hover .iconItem {
    fill: #374697 !important;
}

.c-grid .c-grid__element--delux-02 {
    /* grid-column: 7/9;
    grid-row: 2/3; */
    grid-area: elemento5;
    color: white;
    background: #374697;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--delux-02:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--delux-02:hover h3 {
    color: #374697;
}

.c-grid .c-grid__element--delux-02:hover .c-grid__element-icon,
.c-grid .c-grid__element--delux-02:hover .iconItem {
    fill: #374697 !important;
}

.c-grid .c-grid__element--otros {
    /* grid-column: 7/9;
    grid-row: 3/4; */
    grid-area: elemento11;
    color: white;
    background: #9FCFD4;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--otros:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--otros:hover h3 {
    color: #9FCFD4;
}

.c-grid .c-grid__element--otros:hover .c-grid__element-icon,
.c-grid .c-grid__element--otros:hover .iconItem {
    fill: #9FCFD4 !important;
}

.c-grid .c-grid__element--extra {
    /* grid-column: 5/7;
    grid-row: 3/4; */
    grid-area: elemento10;
    color: white;
    background: #E570A6;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--extra:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--extra:hover h3 {
    color: #E570A6;
}

.c-grid .c-grid__element--extra:hover .c-grid__element-icon,
.c-grid .c-grid__element--extra:hover .iconItem {
    fill: #E570A6 !important;
}

.c-grid .c-grid__element--taxipet {
    /* grid-column: 3/5;
    grid-row: 3/4; */
    grid-area: elemento9;
    color: white;
    background: #AB53B1;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--taxipet:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--taxipet:hover h3 {
    color: #AB53B1;
}

.c-grid .c-grid__element--taxipet:hover .c-grid__element-icon,
.c-grid .c-grid__element--taxipet:hover .iconItem {
    fill: #AB53B1 !important;
}

.c-grid .c-grid__element--xolos {
    /* grid-column: 3/4;
    grid-row: 2/3; */
    grid-area: elemento8;
    color: white;
    background: #E83085;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--xolos:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--xolos:hover h3 {
    color: #E83085;
}

.c-grid .c-grid__element--xolos:hover .c-grid__element-icon,
.c-grid .c-grid__element--xolos:hover .iconItem {
    fill: #E83085 !important;
}

.c-grid .c-grid__element--pome {
    /* grid-column: 3/4;
    grid-row: 2/3; */
    grid-area: hpo;
    color: white;
    background: #E83085;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--pome:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--pome:hover h3 {
    color: #E83085;
}

.c-grid .c-grid__element--pome:hover .c-grid__element-icon,
.c-grid .c-grid__element--pome:hover .iconItem {
    fill: #E83085 !important;
}

.c-grid .c-grid__element--gatitos {
    /* grid-column: 4/5;
    grid-row: 2/3; */
    grid-area: elemento7;
    color: white;
    background: #68CDB2;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--gatitos:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--gatitos:hover h3 {
    color: #68CDB2;
}

.c-grid .c-grid__element--gatitos:hover .c-grid__element-icon,
.c-grid .c-grid__element--gatitos:hover .iconItem {
    fill: #68CDB2 !important;
}

.c-grid .c-grid__element--skin {
    /* grid-column: 3/4;
    grid-row: 2/3; */
    grid-area: hpo2;
    color: white;
    background: #E83085;
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    cursor: pointer;
}

.c-grid .c-grid__element--skin:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: white;
    color: #000;
}

.c-grid .c-grid__element--skin:hover h3 {
    color: #E83085;
}

.c-grid .c-grid__element--skin:hover .c-grid__element-icon,
.c-grid .c-grid__element--skin:hover .iconItem {
    fill: #E83085 !important;
}

@media screen and (max-width: 1080px) {
    .c-grid {
        width: 100%;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 190px;
        grid-gap: 15px;
        grid-template-areas: "elemento1 elemento1 elemento2 elemento2 elemento8 elemento7" "elemento1 elemento1 elemento3 elemento3 elemento6 elemento6" "elemento1 elemento1 elemento4 elemento4 elemento5 elemento5" "elemento1 elemento1 elemento9 elemento9 elemento10 elemento10" "elemento1 elemento1 elemento11 elemento11 elemento11 elemento11" "elemento1 elemento1 hpo hpo hpo2 hpo2";
    }
}

@media screen and (max-width: 992px) {
    .c-grid {
        width: 100%;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 190px;
        grid-gap: 15px;
        grid-template-areas: "elemento1 elemento1 elemento1 elemento1 elemento8 elemento7" "elemento2 elemento2 elemento3 elemento3 elemento6 elemento6" "elemento4 elemento4 elemento5 elemento5 elemento9 elemento9" "elemento10 elemento10 elemento10 elemento11 elemento11 elemento11" "hpo hpo hpo hpo2 hpo2 hpo2";
    }
}

@media screen and (max-width: 768px) {
    .c-grid {
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 190px;
        grid-gap: 15px;
        grid-template-areas: "elemento1 elemento1 elemento1 elemento1 " "elemento2 elemento2 elemento8 elemento7 " "elemento3 elemento3 elemento6 elemento6 " "elemento4 elemento4 elemento5 elemento5 " "elemento9 elemento9 elemento10 elemento10 " "elemento11 elemento11 elemento11 elemento11 " "hpo hpo hpo hpo "  "hpo2 hpo2 hpo2 hpo2 ";
    }
}

@media screen and (max-width: 576px) {
    .c-grid {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows:190px;
        grid-gap: 15px;
        grid-template-areas:
            "elemento1 elemento1"
            "elemento1 elemento1"
            "elemento2 elemento2"
            "elemento3 elemento3"
            "elemento6 elemento6"
            "elemento4 elemento4"
            "elemento5 elemento5"
            "elemento7 elemento7"
            "elemento8 elemento8"
            "elemento9 elemento9"
            "elemento10 elemento10"
            "elemento11 elemento11"
       "hpo hpo"
    "hpo2 hpo2";
    }
}

/* Termina GridLayout */